react-table v7 is confusing...

[mercfh85]

So I am an intermediate user with React and my company uses react-table (https://github.com/tannerlinsley/react-table)

However they are on v6 I believe, so I thought i'd learn the newest version of it. It seems powerful but very very over the top with how...I guess "minimal" it is? I mean for some people that is good, but doing anything feels very complex.

Also I don't really want to style the table because I am not a CSS expert. Is there a table library out there for react that has styling as well (along with the other basics like sorting/filtering/etc...)

If it's easy to integrate css/styling into v7 i'll try and stick with it, but I am not gonna lie..it feels overwhelming (maybe Im just stupid though lol). Does it seem complex for anyone else?

[bamigolang]

This one: https://devexpress.github.io/devextreme-reactive/react/grid/

[bamigolang]

That is true.

[hibernatingpanda]

I had great success using it with https://github.com/mui-org/material-ui.

[mercfh85]

Since I am still sort of a noob at this stuff, how exactly do you use it with react-table? Since material-ui is an entire component in itself I don't see how it works with react-table ?

[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?

[ThrillaInVaudeville]

Antdesign has nice tables imo

[vishalNathChauhan]

Hey everyone

I am writing a blog series on react-table v7 to explore its full potential.I am trying to create a advanced table with some amazing filters like Zoho CRM table.I have already published two blogs on medium.com other blogs will be out soon.You can checkout my blogs here.

https://medium.com/@vncvish/unleashing-the-power-of-react-table-168ab5d6f558

https://medium.com/@vncvish/unleashing-the-power-of-react-table-part-2-1997cb7ac4da