React Table (https://react-table.js.org) is a flexible table component for React apps. It has many useful features, such as filtering, sorting, and pivoting. Let's use the GitHub REST API app that we created in Chapter 8, Consuming the REST API with React:

1. To install the react-table component, open PowerShell and move to the restgithub folder, which is the root folder of the app. Install the component by typing the following command:

      npm install react-table

2. Open the App.js file with VS Code and remove tablerows and the table inside the return. Now, the App.js file should appear as follows:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState([]);
  const [keyword, setKeyword] = useState('');

  const fetchData = () => {
    const url = `https://api.github.com/search/repositories?q=${keyword}`;
    fetch(url)
    .then(response => response.json()) 
    .then(responseData => {
      setData(responseData.items); 
    }); 
  }
  
  const handleChange = (e) => {
    setKeyword(e.target.value);
  } 

  return (
    <div className="App">
      <input type="text" onChange={handleChange} />
      <button onClick={fetchData} value={keyword} >fetch</button>
    </div>
  );
}

export default App;   

3. Import the react-table component and style sheet by adding the following lines at the beginning of the App.js file:

      import ReactTable from "react-table";
      import 'react-table/react-table.css';

4. To fill the React Table with data, you have to pass the data prop to the component. Data can be an array or object and therefore we can use our state, called data. Columns are defined using the columns prop, and this prop is required:

      <ReactTable
        data={data}
        columns={columns}
      />

5. We will define our columns by creating an array of column objects. In a column object, you have to define at least the header of the column and the data accessor. The data accessor values come from our REST API response data. You can see that our response data contains an object called owner, and we can show these values using the owner.field_name syntax:

      const columns = [{
         Header: 'Name',  // Header of the column  
         accessor: 'full_name' // Value accessor
        }, {
         Header: 'URL',
         accessor: 'html_url',
        }, {
         Header: 'Owner',
         accessor: 'owner.login',
      }]

6. Add the React Table component to our return statement, and then the source code looks like the following:

const columns = [{
   Header: 'Name', // Header of the column 
   accessor: 'full_name' // Value accessor
  }, {
   Header: 'URL',
   accessor: 'html_url',
  }, {
   Header: 'Owner',
   accessor: 'owner.login',
 }]

return (
  <div className="App">
    <input type="text" onChange={handleChange} />
    <button onClick={fetchData} value={keyword} >fetch</button>
    <ReactTable data={data} columns={columns} />
  </div>
);

7. Run the app and navigate to localhost:3000. The table looks quite nice. It has sorting and paging available by default, as demonstrated in the following screenshot:

Filtering is disabled by default, but you can enable it using the filterable prop in the ReactTable component. You can also set the page size of the table:

<ReactTable
   data={this.state.data}
   columns={columns}
   filterable={true}
   defaultPageSize = {10}
/>

Now, you should see the filter element in your table. You can filter using any column, but there is also an option to set the filtering and sorting at the column level:

You can find different props for the table and columns from the React Table website.

Cell renderers can be used to customize the content of the table cell. The following example shows how you can render a button to a table cell. The function in the cell renderer passes value as the argument and, in this case, the value will be full_name, which is defined in the accessor of the column. The other option is to pass a row, which passes the whole row object to the function. Then, you have to define the btnClick function, which is invoked when the button is pressed and you can do something with the value that is sent to the function:

const btnClick = (value) => {
 alert(value);
}

const columns = [{
 Header: 'Name', // Header of the column
 accessor: 'full_name' // Value accessor
}, {
 Header: 'URL',
 accessor: 'html_url',
}, {
 Header: 'Owner',
 accessor: 'owner.login',
}, {
 id: 'button',
 sortable: false,
 filterable: false,
 width: 100,
 accessor: 'full_name',
 Cell: ({value}) => (<button onClick={() => {btnClick(value)}}>Press me</button>)
}]

The following is the screenshot of the table with buttons:

Next, we will start to use the Material-UI component library, which is one of the most popular React component libraries.