React Table v7: What’s New and Improved

Simplifying Table Creation with React Table v7

Creating tables in React can be a daunting task, but with the right tools, it can be a breeze. One such tool is React Table v7, a powerful library that simplifies table creation with its modern, Hooks-based API.

What’s New in React Table v7?

Released in March 2020, React Table v7 is a significant overhaul of the previous version. According to its creator, Tanner Linsley, it’s the culmination of over a year’s worth of work to refactor the entire library into a hooks-only, UI/style/markup-agnostic table building utility. This means you have complete control over the look and feel of your tables, while React Table v7 handles the heavy lifting.

Key Features of React Table v7

So, what makes React Table v7 so special? Here are some of its key features:

• Auto out of the box: Fully controllable API for maximum flexibility
• Sorting: Multi and stable sorting options
• Filters: Powerful filtering capabilities
• Pivoting and aggregation: Easily manipulate your data
• Row selection and expansion: Give users more control over their data
• Column ordering: Let users customize their table experience
• Server-side/controlled data/state: Seamlessly integrate with your backend

Building a Basic Table with React Table v7

Getting started with React Table v7 is easy. First, install it using npm or yarn. Then, create a basic table component using the useTable hook. Here’s an example:
“`jsx
import { useTable } from ‘eact-table’;

const data = [
{ firstName: ‘John’, lastName: ‘Doe’, age: 30 },
{ firstName: ‘Jane’, lastName: ‘Doe’, age: 25 },
];

const columns = [
{
Header: ‘Name’,
accessor: ‘firstName’,
},
{
Header: ‘Age’,
accessor: ‘age’,
},
];

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

return (

))}

))}

))}

))}

);
};
“`
Adding a Footer

Adding a footer to your table is as simple as adding a Footer property to your column objects. Here’s an example:
jsx
const columns = [
{
Header: 'Name',
accessor: 'firstName',
},
{
Header: 'Age',
accessor: 'age',
Footer: info => {
const totalAge = info.rows.reduce((acc, row) => acc + row.values.age, 0);
return <td>{totalAge / info.rows.length}</td>;
},
},
];

Sorting, Filtering, and Pagination

React Table v7 also provides built-in support for sorting, filtering, and pagination. Here’s an example of how you can add sorting to your table:
“`jsx
import { useSortBy } from ‘eact-table’;

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

const { sortBy } = useSortBy({
columns,
data,
});

return (

))}

))}

))}

))}

);
};
“`
Integrating with Material UI

React Table v7 can also be easily integrated with Material UI to create tables that follow the Material Design specification. Here’s an example:
“`jsx
import { Table, TableHead, TableBody, TableCell, TableRow } from ‘@material-ui/core’;

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

return (

React Table v7 is a powerful tool that simplifies table creation in React. With its modern, Hooks-based API, you can create tables with ease, while also having complete control over the look and feel. Whether you’re building a simple table or a complex data grid, React Table v7 has got you covered.