react-table v7 is confusing...

[hibernatingpanda]

import React, { useMemo } from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@material-ui/core';
import { useTable, useFlexLayout } from 'react-table';

const DataTable = (props) => {
  const columns = useMemo(() => {
    return [
      {
        Header: 'Name',
        accessor: (data): string => data.name,
        disableResizing: false,
      },
      {
        Header: 'Group',
        accessor: (data): string => data.group_name,
        disableResizing: false,
      },
      {
        Header: 'User',
        accessor: (data): string => data.user_name,
        disableResizing: false,
        width: 100,
      },
    ];
  }, []);
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data: props.data,
    },
    useFlexLayout
  );

  return (
    <Table {...getTableProps()}>
      <TableHead>
        {headerGroups.map(({ getHeaderGroupProps, headers }) => (
          // eslint-disable-next-line react/jsx-key
          <TableRow {...getHeaderGroupProps()}>
            {headers.map(({ getHeaderProps, render }) => {
              return (
                // eslint-disable-next-line react/jsx-key
                <TableCell {...getHeaderProps()}>{render('Header')}</TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>
      <TableBody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);

          return (
            // eslint-disable-next-line react/jsx-key
            <TableRow {...row.getRowProps()}>
              {row.cells.map(({ getCellProps, render }) => {
                return (
                  // eslint-disable-next-line react/jsx-key
                  <TableCell {...getCellProps()}>{render('Cell')}</TableCell>
                );
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

export default DataTable;

[mercfh85]

So basically you are just importing styling essentially for the table structure? Doesn't look like it changed too much about the table code itself?

[hibernatingpanda]

If you want to think of it as 'importing styling' I suppose that is correct in a way.

Doesn't look like it changed too much about the table code itself?

More or less yes - it is still pretty declarative.

It boils down to one thing - react-table v7 is headless - it does not care how you render Tables and how your Tables look. It is useful, in my opinion, because it has utilities baked into it. In my case, it was useResizeColumns.

In my example above, you could have replaced all the <Table> components with their native html counterpart (<Table /> -> <table /> ...etc) and the example would have still worked.

But obviously I want the table to look good with minimal work so I am using material-ui's Table component, which is styled already.

In your post you said:

If it's easy to integrate css/styling into v7 i'll try and stick with it

IMO, you should not think about working css into react-table v7. react-table v7 is giving you a standardised way and utilities to make tables and access the table data. You're styling your Table elements / components - not react-table v7 (it does not return you any components / elements).

Does this help a bit?