How to build powerful tables in React using the React Table package

mkdir movie-databasecd movie-databasemkdir frontendcd frontendnpx create-react-app .

npm install react-table match-sorter --save

code .npm start

import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';import { useTable, useFilters, useGlobalFilter, useSortBy, usePagination } from 'react-table';import { matchSorter } from 'match-sorter';import './App.css';// Define a default UI for filteringfunction DefaultColumnFilter({ column: { filterValue, preFilteredRows, setFilter } }) {const count = preFilteredRows.length;return (<inputvalue={filterValue || ''}onChange={(e) => {setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely}}placeholder={`Search ${count} records...`}/>);}// Fuzzy text search essentially means approximate string matching and is a way of looking up strings that match a pattern even if the characters are not in the correct order.function fuzzyTextFilterFn(rows, id, filterValue) {return matchSorter(rows, filterValue, { keys: [(row) => row.values[id]] });}// Let the table remove the filter if the string is emptyfuzzyTextFilterFn.autoRemove = (val) => !val;// Our table componentfunction Table({ columns, data }) {const filterTypes = React.useMemo(() => ({fuzzyText: fuzzyTextFilterFn,text: (rows, id, filterValue) => {return rows.filter((row) => {const rowValue = row.values[id];return rowValue !== undefined? String(rowValue).toLowerCase().startsWith(String(filterValue).toLowerCase()): true;});},}),[]);const defaultColumn = React.useMemo(() => ({// Let's set up our default Filter UIFilter: DefaultColumnFilter,}),[]);const {getTableProps,getTableBodyProps,headerGroups,prepareRow,page,visibleColumns,canPreviousPage,canNextPage,pageOptions,pageCount,gotoPage,nextPage,previousPage,setPageSize,state: { pageIndex, pageSize },} = useTable({columns,data,defaultColumn, // Be sure to pass the defaultColumn optionfilterTypes,initialState: { pageIndex: 0 },},useFilters,useGlobalFilter,useSortBy,usePagination);return (<><div className="container"><div><h1>Movie Database</h1><table {...getTableProps()} cellPadding={0} cellSpacing={0}><thead>{headerGroups.map((headerGroup) => (<tr {...headerGroup.getHeaderGroupProps()}>{headerGroup.headers.map((column) => (// Add the sorting props to control sorting. For this example// we can add them into the header props<th><div {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render('Header')}{/* Add a sort direction indicator */}<span>{column.isSorted ? (column.isSortedDesc ? ' ' : ' ') : ''}</span></div><div>{/* Render the columns filter UI */}<div>{column.canFilter ? column.render('Filter') : null}</div></div></th>))}</tr>))}<tr><thcolSpan={visibleColumns.length}style={{textAlign: 'left',}}></th></tr></thead><tbody {...getTableBodyProps()}>{page.map((row, i) => {prepareRow(row);return (<tr {...row.getRowProps()}>{row.cells.map((cell) => {return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;})}</tr>);})}</tbody></table><br /><div className="pagination"><div><button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>{'<<'}</button>{' '}<button onClick={() => previousPage()} disabled={!canPreviousPage}>{'<'}</button>{' '}<button onClick={() => nextPage()} disabled={!canNextPage}>{'>'}</button>{' '}<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>{'>>'}</button>{' '}<span>Page{' '}<strong>{pageIndex + 1} of {pageOptions.length}</strong>{' '}</span><span>| Go to page:{' '}<inputtype="number"defaultValue={pageIndex + 1}onChange={(e) => {const page = e.target.value ? Number(e.target.value) - 1 : 0;gotoPage(page);}}style={{ width: '100px' }}/></span>{' '}<selectvalue={pageSize}onChange={(e) => {setPageSize(Number(e.target.value));}}>{[10, 20, 30, 40, 50].map((pageSize) => (<option key={pageSize} value={pageSize}>Show {pageSize}</option>))}</select><div>Showing the first {page.length} results of {page.length} rows</div></div></div></div></div></>);}function App() {const columns = React.useMemo(() => [{Header: ' ',columns: [{Header: 'Movie',accessor: 'movie',filter: 'fuzzyText',},{Header: 'Genre',accessor: 'genre',filter: 'fuzzyText',},],},],[]);const data = [{ movie: 'Spider-Man: No Way Home', genre: 'Action' },{ movie: "The King's Man", genre: 'Action' },{ movie: 'The Matrix Resurrections', genre: 'Action' },{ movie: 'West Side Story', genre: 'Romance' },{ movie: 'Ghostbusters: Afterlife', genre: 'Fantasy' },{ movie: 'House of Gucci', genre: 'Drama' },{ movie: 'The Boss Baby', genre: 'Comedy' },{ movie: 'F9', genre: 'Action' },{ movie: "Don't Look Up", genre: 'Comedy' },{ movie: 'Dune', genre: 'Sci-fi' },{ movie: 'Clifford the Big Red Dog', genre: 'Comedy' },{ movie: 'Encanto', genre: 'Comedy' },{ movie: 'Shazam!', genre: 'Action' },{ movie: 'The Old Guard', genre: 'Action' },{ movie: 'My Hero Academia: Two Heroes', genre: 'Action' },{ movie: 'The Hobbit', genre: 'Fantasy' },{ movie: 'Forrest Gump', genre: 'Drama' },{ movie: 'The Theory of Everything', genre: 'Drama' },{ movie: 'Star Trek', genre: 'Sci-fi' },{ movie: 'Pulp Fiction', genre: 'Drama' },{ movie: 'Mad Max: Fury Road', genre: 'Fantasy' },{ movie: 'Hancock', genre: 'Action' },{ movie: 'Red Notice', genre: 'Action' },{ movie: 'The Unforgivable', genre: 'Drama' },{ movie: 'Dark Waters', genre: 'Drama' },{ movie: 'After', genre: 'Romance' },{ movie: 'Once Upon a Time... In Hollywood', genre: 'Drama' },{ movie: 'Escape Room', genre: 'Sci-fi' },{ movie: 'The Irishman', genre: 'Drama' },{ movie: 'Enola Holmes', genre: 'Adventure' },];return <Table columns={columns} data={data} />;}export default App;

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}html {font-size: 16px;}body {font-size: 1rem;background: #7f80db;font-family: 'Quicksand', sans-serif;color: #2d3039;}.container {display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;width: 100vw;margin-top: 5rem;}.container h1 {text-align: center;text-transform: uppercase;font-size: 4rem;}.pagination {background: #edf3fa;padding: 1rem;display: flex;flex-flow: row nowrap;justify-content: center;}table {padding: 1rem;width: 100%;border-radius: 1rem;border: 0.5rem solid #2d3039;}table th div {font-size: 1.6rem;background: #2d3039;color: #ffffff;}table thead tr td {width: 30rem;}table td {background: #edf3fa;width: 30rem;max-width: 30rem;padding: 1rem;border-bottom: 0.1rem solid #2d3039;border-top: 0.1rem solid #2d3039;}input {width: 100%;height: 4rem;padding: 1rem;border: 0.1rem solid #2d3039;margin-bottom: 1rem;}button {background: #ffffff;height: 2rem;width: 2rem;border: none;cursor: pointer;}select {height: 2rem;width: 10rem;}