Creating a React-table (Part 1: basic table)

Before we get started, make sure you have the following dependencies installed in your project:

• react
• react-dom
• react-table

Here, we assume that you already know how to create a react application and know how to install dependencies.

First, we need to import React and react-table. We'll also create an array of data that we want to display in our table. You may go to https://mockaroo.com to generate some fake data.

Doc. 1: Data generated from mockaroo (file name: MOCK_DATA.json)

We are going to define our columns array. This array should contain an object for each column in our table, with a Header property that specifies the column header, and an accessor property that specifies which property of our data objects to display in that column.

Doc. 2: Columns array (file name: columns.js)

This array should contain an object for each column in our table, with a Header property that specifies the column header, footer and an accessor property that specifies which property of our data objects to display in that column.

Next, we'll create a component called Table that will render our table. In this component, we'll use the useTable hook from react-table to create our table instance. To use the useTable hook, we pass in an options object with two properties: columns and data . Columns is an array of objects that define the columns of our table, and data is the array of data we want to display. We then use destructuring to extract the necessary properties from the tableInstance object returned by useTable. These properties are used to render our table's header and body.

Doc. 3: BasicTable functional component(file name: BasicTable.js)

This is document is for our BasicTable component. it is made of 4 main parts(blocks):

The first block of code imports the necessary modules and data for the table component. React and useMemo are imported from the React library, while useTable is imported from the react-table library. MOCK_DATA and COLUMNS are imported from separate files, and table.css is the styling for the table.

The second block uses the useMemo hook to memoize the COLUMNS and MOCK_DATA constants. This helps optimize performance by avoiding unnecessary re-renders of the table.

The third block uses the useTable hook to create the necessary props and data for the table. The columns and data constants defined above are passed in as arguments. The resulting object contains the following properties:

• getTableProps: A function that returns the necessary props for the table element.
• getTableBodyProps: A function that returns the necessary props for the tbody element.
• headerGroups: An array of objects representing the header groups of the table.
• footerGroups: An array of objects representing the footer groups of the table.
• rows: An array of objects representing the rows of the table.
• prepareRow: A function that prepares a row for rendering.

The fourth block of code returns the JSX needed to render the table. The table element gets its props from getTableProps, and the thead, tbody, and tfoot elements are rendered with the appropriate props and data using the map method on the headerGroups, footerGroups, and rows arrays. The prepareRow and render methods are used to prepare and render each row and cell in the table.

Doc. 4: This is to render our BasicTable in our App.js

This code is the main App component of a React application. It imports the CSS file for the app and the BasicTable component from the components directory. The App function returns a div with the class name "App" and the BasicTable component inside it. This means that the BasicTable component will be rendered when the App component is rendered on the page.

Doc. 5: CSS styling for the table (file name: table.css)

This is CSS code that applies styles to a table element and its child elements (table cells, table headers, and table footers). It sets the font family, collapses the borders of the table, and adds a width of 99%. It also sets a border and padding for the table cells and table headers, alternates the background color of rows, and adds a hover effect to rows when the mouse is over them. Additionally, it sets the padding, text alignment, background color, and text color for table headers and table footers.

fig. 1: Our table looking pretty good