Integrating React Table v7 with Material UI 관련

What’s new in React Table v7?

---

The latest version of React Table, react-table v7, provides a modern, Hooks-based API that helps us create tables in React with little hassle.

---

What’s new in React Table v7?

The latest version of React Table, react-table v7, provides a modern, Hooks-based API that helps us create tables in React with little hassle.

The react-table package integrates with Material UI to let us create a table that follows the Material Design specification.

To install Material UI, we run:

yarn add @material-ui/core

npm i @material-ui/core

Then we can use Material UI’s table components with react-table to create the table as follows:

import React from "react";
import { useTable } from "react-table";
import MaUTable from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

const data = [
  { firstName: "jane", lastName: "doe", age: 20 },
  { firstName: "john", lastName: "smith", age: 21 }
];

const columns = [
  {
    Header: "Name",
    columns: [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Last Name",
        accessor: "lastName"
      }
    ]
  },
  {
    Header: "Other Info",
    columns: [
      {
        Header: "Age",
        accessor: "age"
      }
    ]
  }
];

const Table = ({ columns, data }) => {
  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data
  });

  return (
    <MaUTable {...getTableProps()}>
      <TableHead>
        {headerGroups.map(headerGroup => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <TableCell {...column.getHeaderProps()}>
                {column.render("Header")}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableHead>
      <TableBody>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <TableRow {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <TableCell {...cell.getCellProps()}>
                    {cell.render("Cell")}
                  </TableCell>
                );
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </MaUTable>
  );
};

export default function App() {
  return (
    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );
}

In the code above, we used the Material UI components to render the table, but the data is populated by react-table. We called the same methods we used in the simple table example to populate the rows and columns with data.

Therefore, we get the same data and columns as the simple table example, but it adheres to Material Design instead of having no styling.