Posted on Jul 2 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.Before starting, make sure you have the following requirements installed:To get started, create a new React project by running the following command in your terminal:In this step, we'll install the required dependencies for our project. Open a terminal and run the following command inside the project directory: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.That is how looks the JSON data.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 Inside the table, we render the table headers and table body

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.We apply basic styling to the table container by adding a CSS class table-container to the wrapping To run the application, open a terminal, navigate to the project directory, and run the following command:Try yourself Basic Table:Let's add another functionality: the sortBy hook.1.-Import the useSortBy hook:2.- Modify the useTable hook: The useTable hook uses columns, data, and useSortBy as arguments. The useSortBy hook enables the sorting functionality.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.Try yourself Table with Sort functionality:References:W3Schools Free Online Web Tutorials. (n.d.). https://www.w3schools.com/default.aspMDN Web Docs. (n.d.). https://developer.mozilla.org/en-US/React-table tutorial - beginners tutorial (2023) YouTube. Available at: https://www.youtube.com/watch?v=A9oUTEP-Q84&ab_channel=PedroTech. "Give me some ideas to blog about the code in the last three days" prompt. ChatGPT, July 1th, ChatGPT May 24 Version, OpenAI, chat.openai.com.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Melbite blogging Platform - Jun 28 Victor Hazbun - Jun 23 Andrew - Jun 23 ProsperAgada - Jun 26 Once suspended, hcoco1 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, hcoco1 will be able to comment and publish posts again. Once unpublished, all posts by hcoco1 will become hidden and only accessible to themselves. If hcoco1 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ivan Arias. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag hcoco1: hcoco1 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging hcoco1 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.