How To Use UseTable In React Js

In this article, we learn how to use UseTable in React App.

First, open our React project and Install react-table and Axios dependency.

npm install react-table axios

Fetching Row Data using Axios.

useEffect(() => {
    axios("http://api.tvmaze.com/search/shows?q=girls")
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => console.log(err));
  }, []);

For column data, we need headerName and field. the field name is matched with the row data property.

const columns = [
    {
      Header: "Name",
      accessor: "show.name",
    },
    {
      Header: "Type",
      accessor: "show.type",
    },
    {
      Header: "Language",
      accessor: "show.language",
    },
    {
      Header: "Official Site",
      accessor: "show.officialSite",
      Cell: ({ cell: { value } }) =>
        value ? <a href={value}>{value}</a> : "-",
    },
    {
      Header: "Rating",
      accessor: "show.rating.average",
      Cell: ({ cell: { value } }) => value || "-",
    },
    {
      Header: "Status",
      accessor: "show.status",
      filter: "includes",
    },
    {
      Header: "Premiered",
      accessor: "show.premiered",
      // disable the filter for particular column
      disableFilters: true,
      Cell: ({ cell: { value } }) => value || "-",
    },
    {
      Header: "Time",
      accessor: "show.schedule.time",
      disableFilters: true,
      Cell: ({ cell: { value } }) => value || "-",
    },
  ];

So, my TableContainer.js look like this,

import React from "react";
import { useTable } from "react-table";

const TableContainer = ({ columns, data }) => {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })

    return (
        <div>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th {...column.getHeaderProps()}>
                                    {column.render('Header')}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {rows.map((row, i) => {
                        prepareRow(row);
                        return (
                            <tr {...row.getRowProps()}>
                                {row.cells.map((cell) => {
                                    return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                                })}
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    )
}

export default TableContainer

So, my App.js look like this,

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import TableContainer from "./Components/TableContainer";

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

  useEffect(() => {
    axios("http://api.tvmaze.com/search/shows?q=girls")
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => console.log(err));
  }, []);

  const columns = [
    {
      Header: "Name",
      accessor: "show.name",
    },
    {
      Header: "Type",
      accessor: "show.type",
    },
    {
      Header: "Language",
      accessor: "show.language",
    },
    {
      Header: "Official Site",
      accessor: "show.officialSite",
      Cell: ({ cell: { value } }) =>
        value ? <a href={value}>{value}</a> : "-",
    },
    {
      Header: "Rating",
      accessor: "show.rating.average",
      Cell: ({ cell: { value } }) => value || "-",
    },
    {
      Header: "Status",
      accessor: "show.status",
      filter: "includes",
    },
    {
      Header: "Premiered",
      accessor: "show.premiered",
      disableFilters: true,
      Cell: ({ cell: { value } }) => value || "-",
    },
    {
      Header: "Time",
      accessor: "show.schedule.time",
      disableFilters: true,
      Cell: ({ cell: { value } }) => value || "-",
    },
  ];

  return (
    <div className="App">
      <TableContainer columns={columns} data={data} />
    </div>
  );
}

export default App;

Output :