Create column hiding with custom UI in react table.
Today in this tutorial I will show you how to create a custom column hiding in react table. So I was working on a project where the client asked me to give functionality to hide columns but not the regular ones in the react table example. So basically I created this. I also made an advanced version of the project where you can show only specific columns on mobile and desktop, as well as custom settings for a specific user, but that is for a later article. So let us start the tutorial…
Requirements
- Create a components folder inside the src folder and inside that create a file name Table.js and paste the below code inside that file
In the above code, the column hiding example was taken from react-table documentation and I have added some custom HTML to the checkbox so that I can modify that with custom CSS.
2. Now we will need some dummy data for the table to display. I have used users data from https://jsonplaceholder.typicode.com/users which you can also download and save to your src folder. Just open the link and right-click and click on the save as option and save it to the src folder.
3. Now import your Table.js component and dummy data to your app.js file.
I have also created an array of objects for columns which I am passing as a prop to my Table component and also the dummy data.
Note: Header is the name you want to display on the table header and accessor is the key name from the data.
4. Now it’s time to style our checkbox and table. Just paste the below CSS inside your style.css file.
So finally we will come up with this.
For any query, you can get in touch with me via LinkedIn
Below you can find the sample GitHub Repository and demo on code sandbox.
