Table Tools

The "Table Tools" are a collection of hooks and components to build tables based on the PatternFly (v4) Table component and the Red Hat Insights PrimaryToolbar component.

It provides implementations and state management for several features and provides a context to access the state to request/provide data to show on the table.

Supported PrimaryToolbar features

• pagination - usePagination
• exportConfig - useExport
• bulkSelect - useBulkSelect
• column management - useColumnManager
• filterConfig & activeFiltersConfig - useFilterConfig
• toolbar actions

Supported Table feature

• sorting columns - useTableSort
• selectable rows - useBulkSelect
• radio selectable rows - useRadioSelect
• expandable rows - useTableView
• TreeTable - useTableView
• EmptyState - useTableView

Install

$ npm install --save bastilian-tabletools
Copy

Basic usage

The tabletools offer three ways of building and filling a table, via an async function that returns an array of paginated items, via an useQuery like hook that provides the table with an array of paginated items or by using the StaticTableToolsTable with an "static" array of all items unpaginated.

Using an async function

An async function can be provided as the items prop to retrieve items to show in the table. The function should return an array with two items, the first being the array of items to show and the second being the total amount of items available to show in the table.

import { TableToolsTable } from 'bastilian-tabletools';

const BasicExample = () => {
  const fetchItems = async () => {
    const response = await fetch('/api')
    const json = await response.json();

    return [json.data, json.meta.total]
  }

  const columns = [
    {
      title: 'Title',
      key: 'title'
    },
  ];

  return (
    <TableToolsTable items={fetchItems} columns={columns} />
  );
}

export default BasicExample;
Copy

Using a useQuery (like) hook

To use the TableToolsTable component with an useQuery like hook, it needs to be passed a loading, items, total and optionally an error prop. The loading prop should be the loading state of the hook. The items should be the fetched result(s) in an array, with the total being the overall amount of items/results available.

import { TableToolsTable } from 'bastilian-tabletools';

const BasicQueryExample = () => {
  const {
    loading,
    result: { data, meta: { total } = {} } = {},
    error,
  } = useExampleDataQuery({ endpoint: '/api' });

  const columns = [
    {
      title: 'Title',
      key: 'title',
    },
  ];

  return (
    <TableToolsTable
      loading={loading}
      items={data}
      error={error}
      total={total}
      columns={columns}
    />
  );
};

export default BasicQueryExample;
Copy

Using the StaticTableToolsTable

In cases where it is not possible to fetch paginated results from an API, or it is unnecessary to only fetch paginated results, the StaticTableToolsTable can be used.

It can be passed an array of all available items/results and provides sorting and filtering of arrays out of the box.

import { StaticTableToolsTable } from 'bastilian-tabletools';

const BasicStaticExample = () => {
  const arrayOfItems = itemsFactory(4096);

  const columns = [
    {
      title: 'Title',
      key: 'title',
    },
    {
      title: 'Artist',
    },
  ];

  return (
    <StaticTableToolsTable
      items={arrayOfItems}
      columns={columns}
    />
  );
};

export default BasicStaticExample;
Copy

For more advance use please see the rest of the documentation at bastilian.github.io/tabletools/