React Table: The Headless Table Library for React
以下为 快照 页面，建议前往来源网站查看，会有更好的阅读体验。
React Table: The Headless Table Library for React
4 steps guide to creating a table with search and filter options.
As developers, we always look for methods to present the application data in a structured way. More often, we use tables for that. However, most of the time, we need features like searching, filtering, sorting with tables.
That’s where we can use libraries like React Table that saves time in development.
Choosing React Table Library
React Table is a collection of hooks for building robust Tables and Datagrid experiences.
Being one of the most renowned table libraries for React, it offers many features to make you fall for it.
- React Table is a headless utility, which implies it doesn’t render or provide any UI elements, markup, or styles and allows you to have 100% control over markup and styles.
- It is a collection of hooks and, these hooks are compact, lightweight, and highly extensible.
- It provides an uncompromised user experience and UI.
- There is easily comprehensible typography and custom elements within the Table.
- It facilitates searching options on the Table or particular columns while enabling filtering or sorting data.
- React Table is super solid and declarative in that it aid for pagination and lets you show hide columns, inline data editing, column resizing to fit with long data points, and support for horizontal and vertical scrolling.
- A modal/details panel can be used to edit an entire row of data.
- Its support for multiple devices with fixed headers and columns for quick data viewing lets you achieve higher responsiveness.
As you can see, React Table covers most of the table functionalities for us, and that’s why I choose it over other libraries.
Creating a Table with React-Table
I have created a basic table using React Table and shared it to Bit.dev. Examine it or import it (clone) to your Bit workspace and give it a try.
Now let’s see how to build a simple table UI with basic filtering and sorting functionalities.
Step 1 — Setting up the project
First, you need to create a React application and integrate relevant APIs to fetch data for your tables.
In this example, I will be using “User Details” from “JSON Placeholder Free fake API.” Also, I will be using Axios to make API calls.
When you think of a table structure, you generally think of rows and columns. With nested columns, sub rows, and other elements, table configurations can become even more complicated.
Here, I have created the simple table structure named
tabledata and included two headers and column groups. There is also an
accessor for each column, which is the data in the
React.useMemois used to create a table structure to ensure that the data isn’t recreated on every render.
Step 2 — Creating the table component.
Then we need to add React Table to the application. For that, let’s create a separate component. You can install it using NPM or Yarn.
npm install react-table or
yarn add react-table
As I have mentioned before, React Table consist of a variety of hooks. In this example, I will be using the
userTable hook. Here, the table component accepts two props named data and columns to generate the table’s header and cells.
table.js file will look as follows, and you need to import this file to
The above code will generate a basic table view like this:
At a high level, this table is satisfactory. But what if you want unique styles? You can create custom styles for each cell with React Table at this point.
Step 3 — Add searching/filtering functionality
Now I will show you the steps to add search functionality to your React Table.
First, we need to have a search input in our
table.js. And then, we can use
useFilters hook provided by React Table to filter out results.
I have implemented the filtering option only for the name attribute. When the user changes the search bar’s input value, it will show only the matching rows.
Step 4 — Add sorting functionality
To add the sorting option to our table, we need to incorporate the
useSortBy plugin hook provided by the React Table. It will sort in ascending and descending order dynamically. It's that simple.
You can decide whether to enable this option for all the columns or for specific columns only; it is all up to you. You can manipulate this by applying the
disableSortBy option on a column to disable sorting.
To enable sorting for all the columns, edit
table.js by adding the following.
After all these configurations, your
table.js will eventually look like below.
When and Where to Use React-Table?
Although React Table is rich in features, it’s essential to understand where it fits well and where it won’t.
Where it fits well
- Your table UI needs core functionality like sorting, filtering, and pagination. React Table would be a good choice.
- Your Table acts solely as a showcase but needs to be very light and efficient; you can go for React Table.
Where it won’t
- If you are looking for advanced support in horizontal and vertical scrolling, React Table might not be the best match for you.
- If you need to facilitate inline editing with React Table, you have to depend on plugins to add such functionality.
- When dealing with infinitely long tables, it’s better to go for an alternative than sticking to React Table.
React Table is the most widely known table library for React. It would be a better choice for table UIs with limited data, custom styles, and basic functionalities like sorting and filtering.
However, based on the project requirements, various alternatives may exist.
So, I invite you to use React Table Library and share your thoughts in the comments section.
Thank you for reading..!!!
Build & share independent components with Bit
Bit is an ultra-extensible tool that lets you create truly modular applicationswith independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.
Concepts React Table is a "headless" UI library React Table is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements. You are in charge of utilizing the sta...
README.md DEITY FALCON
A Quick Introduction to Coveo Headless Library and Svelte By François Lachance-Guillemette — February 23, 2021 I...
Grid.js Advanced table plugin A table library that works everywhere Simple and lightweight impleme...
ali-react-table：高性能 React 表格组件肥超盒马前端，可视化新人 github@shinima在...
Puppeteer API | FAQ |
hlspy - A simple headless browser
Headless mode is a useful way to run Firefox, which is just as it sounds — Firefox is run as normal, except without any of the UI components visible. This may not be very useful for surfing the web, but it is very useful for automated testing. T...
Use Apostrophe as a headless CMS with REST APIs for your apps