@talkohavy/table

The most simple Table implementation in the world, that fits 90% of your use-cases.

1. Supported Features

1. Row Virtualization
2. Row selection (Multi & Single)
3. Sticky Headers
4. Sorting (including multi-sort)
5. Column Resizing
6. Group Headers
7. Pagination
8. Infinite scroll
9. onRowClick event
10. Load more data when reaching bottom
11. ⭐️Highly customizable⭐️ with custom css hooks for personal styling

2. List of known problems

1. Double-render. For some reason, row selection has to be a dependency for when calculating columnDefs in order for selected rows which were checked using the checkbox to appear as such in the next render. In the example shown in @tanstack/table it seemed like that isn't necessary. Need to check.
2. Table Width. Now that Column-Sizing is a built-in feature, need to figure out the best way to handle table width, and how to make it take up the full size of its container.

3. Getting Started

install the package:

npm install @talkohavy/table

import and use the Table component like so:

import { Table } from '@talkohavy/table';

export const data = [
  {
    id: 1,
    first_name: 'Emlen',
    last_name: 'Orth',
    email: '[email protected]',
    gender: 'Female',
    ip_address: '163.228.179.208',
  },
  {
    id: 2,
    first_name: 'Conrad',
    last_name: 'Liepmann',
    email: '[email protected]',
    gender: 'Male',
    ip_address: '225.98.191.215',
  },
  {
    id: 3,
    first_name: 'Magnum',
    last_name: 'Le Brom',
    email: '[email protected]',
    gender: 'Male',
    ip_address: '170.255.125.199',
  },
  {
    id: 4,
    first_name: 'Bette',
    last_name: 'Wroughton',
    email: '[email protected]',
    gender: 'Female',
    ip_address: '169.143.132.230',
  },
];

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <Table data={data} />
    </div>
  );
}

That's it 🙂

Now, since Table is essentially a wrapper around @tanstack/table, you can pass columnDefs to it as you normally would:

import { Table } from '@talkohavy/table';
import { createColumnHelper } from '@tanstack/react-table';

const columnHelper = createColumnHelper<any>();

const columnDefs = [
  columnHelper.accessor('id', { header: 'ID' }),
  columnHelper.accessor('first_name', { header: 'First Name', enableSorting: true }),
  columnHelper.accessor('last_name', { header: 'Last Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
  columnHelper.accessor('gender', { header: 'Gender' }),
  columnHelper.accessor('ip_address', { header: 'IP Address' }),
];

export const data = [/* ... data here ...*/];

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <Table data={data} columnDefs={columnDefs} />
    </div>
  );
}

Play around and have fun exploring 🧡

4. Table Options

Here's a list of all supported options:

1. data type: Array<T>

   The only mandatory prop which Table requires.

2. columnDef type: ColumnDef

   Exactly what you know about ColumnDef from @tanstack/table.

3. showFooter type: boolean

   * Will be explained in the future *

4. rowSelectionMode type: string Options: 'none' | 'single' | 'multi'

   * Will be explained in the future *

5. searchText type: string

   Goes together with setSearchText.
   The data passed to Table will be filtered by rows that include searchText.
   * Will be explained in the future *

6. setSearchText type: (value: any) => void

   Goes together with searchText.

   * Will be explained in the future *

7. defaultColumn type: Partial<ColumnDef<TData, unknown>>

   * Will be explained in the future *

8. customTableFooter type: React Component

   * Will be explained in the future *

9. initialPageSize type: number

   * Will be explained in the future *