glaucopater / datagrid-poc

A Datagrid made with react, typescript and css modules

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ’… DataGrid Proof of concept made with React, TypeScript, CSS Modules

Netlify Status

πŸ”Ž Filtering

Users should be able to filter the table. They expressed that every column should include an input field where they could type their search. The table should then be filtered so that only rows that match the search term for the respective column are included.

πŸ—„οΈ Sorting

Users should be able to sort every column of the table. If the user clicks the column title for the first time it should sort this column in ascending order. When an user clicks the same title again this should toggle between ascending and descending.

🎁 Installing dependencies

This project uses yarn. You can run the following command to install all dependencies.

yarn install

πŸ› οΈ Running the dev server

To see what you're building run the following command:

yarn start

It will start the dev-server and open a page in your default browser.

πŸ§ͺ Testing

This project uses jest as a test runner. The tests are written using @testing-library/react. Also, we have enhanced the expects with @testing-library/jest-dom to give you some more explicit assertions.

You can run all tests with the following command:

yarn test

πŸ“¦ Example data

All data comes from ./src/data.json.

Live Demo πŸ”₯

Demo

Demo

Demo

About

A Datagrid made with react, typescript and css modules

License:MIT License


Languages

Language:TypeScript 91.4%Language:CSS 4.4%Language:HTML 4.0%Language:Shell 0.3%