React Table — Life Saver for my React Project
Hey People,
I hope you are doing great. In my learning path to react, I recently learned a very good package for rendering HTML tables to react.
Since I worked in Supply-Chain domain, So the system needs a robust and scalable solution for rendering tables to react.
There were many parameters/features we were looking like a solution. Some of them are listed below.
1. Provide Dynamic Binding of data with Pagination.
2. Sorting and Searching the records in real-time and with instant results.
3. Page Count — Next and Previous Controls.
4. Highly customize-able and theme-able with colors and design matched.
I would like to say Big Thanks to the library none other than React Table (https://www.npmjs.com/package/react-table).
It is a lightweight, fast and extendable data-grid built for React.
It serves all the purpose and provides a hell lot of features that amazed me.
I have prepared a small demo along with the codebase to get the best of the plugin.
Demo Link — https://react-table-extension.netlify.com/
Github Code Repo — https://github.com/tarun-nagpal-github/react-table-extension
I have used this plugin and also extend it to provide an extra feature to show/hide the columns needed on the fly.
Let me guide you on the steps to use it and take this privilege in your next react project.
Step 1 — Install
// TODO
Step 2 — Import the dependencies into your component
// TODO
Step 3 — Add Columns for the Table
// TODO
Step 4 — Add data for the Table
// TODO
Step 5 — See your output via Simple Example
// TODO
Step 6 (Optional) — Extend to add the Dynamic Column Filter
// TODO
This is just my findings and things I explored
