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 the previous chapter:

1. 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 --save

2. Open the App.js file with the VS Code and remove all code inside the render() method except the return statement with the divider containing the button and input field. Now the App.js file should look like the following:

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

      class App extends Component {
        constructor(props) {
          super(props);
          this.state = { keyword: '', data: [] };
        }

        fetchData = () => {
          const url = `https://api.github.com/search/repositories?
           q=${this.state.keyword}`;
          fetch(url)

          .then(response => response.json()) 
          .then(responseData => {
            this.setState({data : responseData.items }); 
          }); 
        }
  
        handleChange = (e) => {
          this.setState({keyword: e.target.value});
        }

        render() {
          return (
            <div className="App">
              <input type="text" onChange={this.handleChange} />
              <button onClick={this.fetchData} value=
               {this.state.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 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 that prop is required:

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

5. We will define our columns by creating the array of column objects into the render() method. 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 render() method, and then the source code of the method looks like the following:

      render() {
        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={this.handleChange} />
            <button onClick={this.fetchData} 
             value={this.state.keyword} >Fetch</button>
            <ReactTable
              data={this.state.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:

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 in 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:

render() {
  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 className="btn btn-default btn-link" onClick=                            {() => {this.btnClick(value)}}>Press me</button>)
}]

The following is the screenshot of the table with buttons: