In web development, tables are commonly used to display structured data in a tabular format. React provides various tools and libraries to create interactive and dynamic tables. One such library is react-table, which simplifies developing and managing tables in React.
In this tutorial, we will learn how to create a table using the react-table library in a React application. We'll walk through the steps of fetching data from an API, setting up the table component, and rendering the table with sortable columns.
Prerequisites
Before starting, make sure you have the following requirements installed:
Node.js and npm (Node Package Manager) - to set up and manage the React application.
Basic knowledge of React - understanding React components and hooks will be helpful.
Step 1: Set Up the Project
To get started, create a new React project by running the following command in your terminal:
npx create-react-app react-table-demo cd react-table-demo
Step 2: Install Dependencies
In this step, we'll install the required dependencies for our project. Open a terminal and run the following command inside the project directory:
npm install react-table
Step 3: Fetch Data
In this step, we'll fetch data from an API and store it in the parent component's state. In this code, we define the App component as the parent component. It fetches data from the API using the fetchData function when the component mounts. The fetched data is stored in the data state variable and passed to the Table component as a prop.
In this step, we'll create the Table component that will render the table using the react-table library.
The useMemo hook is used in this code to memoize the columns configuration so that it is only calculated once and avoids unnecessary recalculations and re-renders.
Using the useTable hook, we create a table instance by passing the columns and data as arguments. The hook returns several properties and methods we can use to render and interact with the table.
We render the table. We use the spread operator (...) to apply the getTableProps function to the
element, which assigns the necessary attributes and event handlers to the table.
Inside the table, we render the table headers <thead> and table body <tbody> using the properties provided by the useTable hook. We iterate over the headerGroups array to render the header rows. We iterate over the header array within each row to render individual header cells.
We iterate over the rows array for the table body to render the data rows. Inside each row, we iterate over the cells array to render the individual cells.
3.- Sort indicators in table headers: The table headers are rendered with sorting indicators. A span element is added within each th element to display the sorting indicator based on the sorting state of the column. It shows "🔽" for descending order and "🔼" for ascending order.
4.- Sorting toggle attributes: The th elements have the column.getSortByToggleProps() function added to their attributes. This function enables toggling the sorting order when the column header is clicked.
The updated code enables sorting functionality in the table by making these changes. Clicking on a column header will trigger sorting based on that column, and the sorting indicator will reflect the current sorting state of the column.
Summary.
In this tutorial, we built a table using a react-table library and implemented hooks like sortBy. Using React Hooks effectively is essential for optimizing the performance and maintaining a clean and efficient codebase in React applications.
Top comments (0)