In this tutorial, I want to show you how to use React Table Library with its usePagination plugin to implement pagination. In the previous example, you installed React Table Library to create a table component. Now, you will enable your users to paginate pages in a table. First, import the usePagination hook: Second, initialize it with the…

React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React (e.g. useState and useReducer ) but also for consuming React's Context . This tutorial shows you how to use React's useContext Hook . Before, make sure to read my React Context tutorial which offers answers to the following…

In this tutorial, I want to show you how to use React Table Library with its useTheme plugin to theme your table with a custom style. In the previous example, you installed React Table Library to create a table component. First, import the useTheme hook: And second, create a theme with it and pass it as plugin prop to the Table component: That…

In this tutorial, I want to show you how to use React Table Library with a fixed header . In the previous example, you installed React Table Library to create a table component and gave it a theme. Now, we will enable users to have their header sticky to the top: The data object we passed to the Table component in the previous tutorial only…

In this tutorial, I want to show you how to use React Table Library with its useSort plugin to implement user sorting. In the previous example, you installed React Table Library to create a table component. Now, you will enable your users to sort columns in the table by clicking on a column's header. First, import the useSort hook: Second…

In this tutorial, I want to show you how to use React Table Library to retrieve server-side data featuring examples of server-side pagination, server-side search and filter, and server-side sort . Let's start by installing React Table Library on the command line: We will use the feature rich Hacker News API for fetching server-side data, but…

In this tutorial, I want to show you how to use React Table Library with its resize feature. In the previous example, you installed React Table Library to create a table component. Now, we will enable users to resize columns in the table by clicking on a vertical bar in the header of the column, and dragging left or right. All you need to do…

Quite recently, in a React freelance project of mine, I came across a React pattern where I had been using the same UI components repetitively across multiple pages tied to specific page information . Let's walk through this thing that I name Context Injection in React. Let's say we have an App component which splits its top-level navigation…

In this tutorial, I want to show you how to use React Table Library to create a table component in React . After this part, there are many other parts giving you examples for searching , filtering , sorting , selecting , nesting tree tables , and pagination for your React table by using React Table Library. Let's start with the basics…