Create a table like DataTables in react using react-table
If you are familiar with jQuery or came from the jQuery background you must have heard about its most popular plugin DataTables. So today I’ll show how to implement DataTables like table structure in react using its most popular library react-table.
For this tutorial, we will be using react-table@6.11.5 and data from JSON placeholder
Requirements
- Open your project directory and install Axios and react-table.
npm install axios react-table@6.11.5 --save2. Open app.js file and import Axios and react-table and initialize some state.
3. Now create an asynchronous function with the name getUsersData and fetch data from JSON placeholder using axios. After the response, change the state of your users and loading using the setState method, and then call that function inside your componentDidMount lifecycle method.
4. Now create a variable with the name Column inside render function which will contain an array of objects.
Note: here Header object will contain the title which you want to set and accessor will contain the name of your response data.
5. Now call ReactTable tag inside return and pass your Column and data inside ReactTable tag.
6. Below is the full code.
7. Now run your react application and refresh the browser to see the changes.
That’s it. Here is the git repository and Live code for reference.
If you want to add your data inside some HTML tags.
Just add Cell object after accessor which will contain row as a parameter and will return your data with HTML tags for e.g
Here we will add name inside h4 tag and mail inside a tag.
Git repository and Live code for reference.
For more functionalities and documentation visit their official repository at NPM.
