Table

Tables allow the user to view and act on a set of data.

Overview

Resources

Install


yarn add @activecampaign/camp-components-table

Migration guide

Many of the changes to props between v1-v2 is due to the integration of the Tanstack Table library. Consumers can now use the power of Tanstack table to configure their table data exactly as is needed for your use case and the Camp Table will style and display it accordingly.

Deprecated prop	Description of change
`columns`	Columns is no longer passed in as a prop. Instead, you will create an instance of Tanstack table and pass your column data to `useTable`. For more information on how to create the columns array for the table instance, see: Implementation with Tanstack Table
`draggable` `dragColumnHeader` `hasDragIndex`	Drag and drop props have been deprecated. The library we used to rely on for this functionality has been deprecated and we are researching a replacement. We expect drag and drop functionality to return to Table in a later update.
`onChange` `onReorder` `onSort`	Callbacks on state change are handled differently in v2. See how to set a callback on Row Selection state change and how to set a callback on Sorting state change.
`scrollBreakpoint`	This is no longer needed; the table will automatically include a gradient on left/right as needed when scroll is present.
`selectedRows`	Initial state values should now be passed to your table instance using Tanstack table.
`sortDirection` `sortIndex`	This information will be stored in the state of your Tanstack table instance. Tanstack sorts ascending first by default (this can be changed by adding `sortDescFirst` to your column object) and includes several built-in sorting functions as well as the ability to customize. For more information about sorting and setting initial state value for sorting state, see: Sorting Options and Setting initial state values
`size`	The new values for size are: `default` (previously “medium”) and `compact` (previously “small”).

Implementation with Tanstack Table

This component is built to work with Tanstack Table . Here is a basic code example of how these two packages work together. For more complex examples, explore these docs further or reference the Tanstack documentation.

Required props

Pass the table instance created by the Tanstack hook to the table prop

Write a columns array: Column Definitions Guide
Initialize the table instance (useReactTable): Table Instance Guide Pass a unique table name to the tableName prop (string)


import React from 'react';
import {
  createColumnHelper,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { Table } from '@activecampaign/camp-components-table';
 
// sample data
import { listTableData, Data } from './sampleData';
 
export const MyTable = ({...props}) => {
  // the column helper, when called with a row type, returns a utility for creating different column
  // definition types with the highest type-safety possible
  const columnHelper = createColumnHelper<Data>();
 
  // compose the columns array using tanstack helper
  const columns = [
    columnHelper.accessor('name', {
      id: 'name',
      header: 'List Name',
    }),
    columnHelper.accessor('activeContactsCount', {
      id: 'activeContactsCount',
      header: 'Active Contacts',
    }),
    columnHelper.accessor('createdDate', {
      id: 'createdDate',
      header: 'Created Date',
    }),
    columnHelper.accessor(() => {}, {
      id: 'subscribeBySMS',
      header: 'Subscribe by SMS',
    }),
  ];
 
  const table = useReactTable({
    data: listTableData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // override default row id's defined by index
    // good to have guaranteed unique row ids/keys for rendering
    getRowId: (row) => row.id,
  });
 
  return (
    <Table
      table={table}
      tableName={'my-table'}
    />
  );
};

Actionable rows

When the actionable prop is added, checkboxes will show on each row to indicate that the row is selectable and a “select all” checkbox will be added to the header row. You can add row selection configs to the table instance like so:


import React, { useState } from 'react';
import {
  createColumnHelper,
  getCoreRowModel,
  RowSelectionState,
  useReactTable,
} from '@tanstack/react-table';
import { Table } from '@activecampaign/camp-components-table';
 
// sample data
import { listTableData, Data } from './sampleData';
 
export const ActionableTable = ({...props}) => {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
  const columnHelper = createColumnHelper<Data>();
  const columns = [
    columnHelper.accessor('name', {
      id: 'name',
      header: 'List Name',
    }),
    columnHelper.accessor('activeContactsCount', {
      id: 'activeContactsCount',
      header: 'Active Contacts',
    }),
    columnHelper.accessor('createdDate', {
      id: 'createdDate',
      header: 'Created Date',
    }),
    columnHelper.accessor(() => {}, {
      id: 'subscribeBySMS',
      header: 'Subscribe by SMS',
    }),
  ];
 
  const table = useReactTable({
    data: listTableData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    state: {
      rowSelection,
    },
    enableRowSelection: true, // enables row selection for all rows
    onRowSelectionChange: setRowSelection,
    // override default row id's defined by index
    // good to have guaranteed unique row ids/keys for rendering
    getRowId: (row) => row.id,
  });
 
  return (
    <div>
      <Table
        actionable
        table={table}
        tableName={'actionable-table'}
      />
    </div>
  );
};

Set a callback on Row Selection state change

You may need to call other functions when row state is updated. Use the onRowSelectionChange option within your Tanstack table instance to do so:


const [currentData, setCurrentData] = useState<Data[]>([...listTableData]);
const [rowSelection, setRowSelection] = useState({});
 
const columnHelper = createColumnHelper<Data>();
const columns = [...yourColumnDataHere];
 
// Custom handler for Tanstack state change allows for callback whenever selection state changes
const handleRowSelectionChange = (selectionStateUpdater) => {
  console.log('This could be a callback func for when selection state changes');
  // access the updater if you need to pass data about the selection state
  console.log(selectionStateUpdater());
  setRowSelection(selectionStateUpdater);
};
 
const table = useReactTable({
  data: currentData,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: {
    rowSelection,
  },
  enableRowSelection: true,
  onRowSelectionChange: handleRowSelectionChange,
  getRowId: (row) => row.id,
});

To add a callback which fires whenever the “Select all” checkbox is selected by the user, use the onSelectAll prop.

Sorting options

To enable sorting, the sortable prop must be added to the Table component. For each column in your columns array, you must use enableSorting to indicate if that column should be sortable.


const columnHelper = createColumnHelper<Data>();
// compose the columns array using tanstack helper
const columns = [
  columnHelper.accessor('name', {
    id: 'name',
    header: 'List Name',
    enableSorting: true,
  }),
  columnHelper.accessor('activeContactsCount', {
    id: 'activeContactsCount',
    header: 'Active Contacts',
    enableSorting: true,
  }),
  columnHelper.accessor('createdDate', {
    id: 'createdDate',
    header: 'Created Date',
    enableSorting: true,
  }),
  columnHelper.accessor(() => {}, {
    id: 'subscribeBySMS',
    header: 'Subscribe by SMS',
    enableSorting: false,
  }),
];

Then, configure your sorting options within your table instance:


import {
  createColumnHelper,
  getCoreRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
 
...
 
const [sorting, setSorting] = useState<SortingState>([]);
 
...
 
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: {
    sorting,
  },
  enableSorting: true,
  // sorting removal should be disabled across all tables in the product
  enableSortingRemoval: false,
  onSortingChange: setSorting,
  getSortedRowModel: getSortedRowModel(),
});

To manage the sorting functions used for each column, there are three different options:

Use a sorting function provided by Tanstack
Use your own custom sorting function
Set up manual sorting for cases like server-side sorting

Tanstack sorting functions

Tanstack comes with several built-in sorting functions that meet many basic needs. When you define your columns, you can specify using one of their BuiltInSortingFns strings like so:


const columnHelper = createColumnHelper<Data>();
// compose the columns array using tanstack helper
const columns = [
  columnHelper.accessor('name', {
    id: 'name',
    header: 'List Name',
    enableSorting: true,
    sortingFn: 'alphanumeric',
  }),
  columnHelper.accessor('activeContactsCount', {
    id: 'activeContactsCount',
    header: 'Active Contacts',
    enableSorting: true,
    sortingFn: 'basic',
  }),
  columnHelper.accessor('createdDate', {
    id: 'createdDate',
    header: 'Created Date',
    enableSorting: true,
    sortingFn: 'datetime',
  }),
  columnHelper.accessor(() => {}, {
    id: 'subscribeBySMS',
    header: 'Subscribe by SMS',
    enableSorting: false,
  }),
];

Custom sorting functions

You can also pass your own custom sorting functions into your column defs in lieu of using a built-in Tanstack sorting function. This is helpful if you need a specific sort pattern and/or if you need to use a callback function when sort is called on a specific column.

If using a callback when sort is called on any column, use the onSortingChange option in the Tanstack table instance instead.


const columns = [
  ...otherColumns,
  columnHelper.accessor('name', {
    id: 'name',
    header: 'List Name',
    cell: (info) => info.getValue(),
    enableSorting: true,
    sortingFn: (rowA: any, rowB: any, columnId) => {
      // if using a callback for every sort action, use table instance instead (see below)
      console.log('A custom sort function was called in the List Name column');
      return rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1;
    },
  }),
]

Set a callback on Sorting state change

Example of using onSortingChange to initiate callback when any sort function is called in the table.


const [currentData, setCurrentData] = useState<Data[]>([...listTableData]);
const [sorting, setSorting] = useState<SortingState>();
 
const columnHelper = createColumnHelper<Data>();
const columns = [
  columnHelper.accessor('name', {
    id: 'name',
    header: 'List Name',
    cell: (info) => info.getValue(),
    enableSorting: true,
    sortingFn: (rowA: any, rowB: any, columnId) => {
      console.log('A custom sort function was called in the List Name column');
      return rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1;
    },
  }),
  columnHelper.accessor('activeContactsCount', {
    id: 'activeContactsCount',
    header: 'Active Contacts',
    enableSorting: true,
    sortDescFirst: false,
  }),
  columnHelper.accessor('createdDate', {
    id: 'createdDate',
    header: 'Created Date',
    enableSorting: true,
  }),
  columnHelper.accessor(() => {}, {
    id: 'subscribeBySMS',
    header: 'Subscribe by SMS',
    enableSorting: false,
  }),
  columnHelper.accessor(() => {}, {
    id: 'actions',
    header: '',
    enableSorting: false,
  }),
];
 
// Custom handler for Tanstack state change allows for callback whenever sort state changes
const handleSortingChange = (sortStateUpdater) => {
  console.log('This could be a callback func for when sort state changes');
  // access the updater if you need to pass data about the sort state
  console.log(sortStateUpdater());
  setSorting(sortStateUpdater);
};
 
const table = useReactTable({
  data: currentData,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: {
    sorting,
  },
  enableSorting: true,
  // sorting removal should be disabled across all tables in the product
  enableSortingRemoval: false,
  onSortingChange: handleSortingChange,
  getSortedRowModel: getSortedRowModel(),
});

Retaining sorted state when user navigates away and returns to table

If a user navigates away from a table, then hits the “Back” button to return to their table view, you may leverage the above callback method to store information about the users sort state in a higher level context. To ensure their stored sort state populates when the table re-renders, see the section below on “Setting initial state values.”

Server-side and manual sorting

Set the manualSorting table option to true if you would like to sort your data before it is passed to the table. This is useful if you are doing server-side sorting.

In this example, the ascending and descending markers are added based on the sorting state and toggled by passing setSorting as the onSortingChange function, however, you may choose to pass your own handler function which updates the sorting state in addition to anything else needed for your application.


const useSorting = (initialField = '', initialOrder = '') => {
  const [sorting, setSorting] = useState([{ id: initialField, desc: initialOrder === 'desc' }]);
 
  let sortOrder;
  if (typeof initialOrder === 'string' && initialOrder.length === 0) {
    sortOrder = '';
  } else if (sorting[0]?.desc) {
    sortOrder = 'desc';
  } else {
    sortOrder = 'asc';
  }
 
  return {
    sorting,
    onSortingChange: setSorting,
    order: sortOrder,
    field: sorting.length ? sorting[0].id : initialField,
  };
};
 
export const ServerSortTable: StoryFn = () => {
  const { sorting, onSortingChange, field, order } = useSorting();
 
  const { data, loading } = useMockAPI({
    sort: { field, order },
  });
 
  const displayUser = (name, email, picture) => (
    <Flex alignItems="center">
      <Avatar src={picture} size="medium" mr="sp400" />
      <Flex direction="column">
        <Link href={`mailto:${email}`} target="_blank">
          {name}
        </Link>
        {email}
      </Flex>
    </Flex>
  );
 
  const columnHelper = createColumnHelper<User>();
  const columns = [
    columnHelper.accessor((row) => `${row.name.first} ${row.name.last}`, {
      id: 'name',
      header: 'Name',
      cell: (info) =>
        displayUser(
          `${info.row.original.name.first} ${info.row.original.name.last}`,
          info.row.original.email,
          info.row.original.picture.medium
        ),
      enableSorting: true,
    }),
    columnHelper.accessor('gender', {
      id: 'gender',
      header: 'Gender',
    }),
    columnHelper.accessor('phone', {
      id: 'phone',
      header: 'Phone',
    }),
  ];
 
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    manualSorting: true,
    onSortingChange,
    enableSortingRemoval: false,
    state: {
      sorting,
    },
  });
 
  return (
    <div>
      {loading ? (
        <Text.Heading>
          Table loading... <LoadingIndicator size="small" />
        </Text.Heading>
      ) : (
        <Text.Heading>Table loaded!</Text.Heading>
      )}
 
      <div style={{ width: '100%', margin: '12px 0 12px' }}>
        <Banner
          title="Table sorting state:"
          description={() => <pre>{JSON.stringify(table.getState().sorting) ?? '[]'}</pre>}
        />
      </div>
 
      <Table table={table} tableName="users-table">
        <TableHead>
          <TableHeaderRow>
            {table.getFlatHeaders().map((header) => {
              let content = (
                <TableHeaderContent header={header}>
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </TableHeaderContent>
              );
              if (header.id === 'name') {
                content = (
                  <TableHeaderSortableContent header={header}>
                    {flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHeaderSortableContent>
                );
              }
              return <TableHeader key={header.id}>{content}</TableHeader>;
            })}
          </TableHeaderRow>
        </TableHead>
        <TableBody />
      </Table>
    </div>
  );
};

Managing column visibility

Add the column management menu to table to allow consumers to change column visibility state. To enable column management, set the table’s columnManagement prop to true. You may also choose to provide custom configs for the ColumnManagementDropdown using the table prop called columnManagementProps.

`minMenuWidth`

By default, the minMenuWidth on the menu is 200px. This may truncate some of its content, depending on the length of your headers. If your headers require the column to be wider, include this in minMenuWidth.

`hideColumnId`

If any column should not be shown in the Column Management menu, pass an array of columnId strings to hideColumnId.

`headerNames`

If you use a custom rendered header, the Column Management Dropdown menu will not be able to infer the header strings for the list. In this case, or if you would like a different column name to appear in this menu from the header string defined in your column, use the headerNames option to define any missing header strings. headerNames expects an array of objects: { id: 'columnId', name: 'Column Name String' }


<Table
  columnManagement
  columnManagementProps={{
    minMenuWidth: '250px',
    hideColumnId: ['actions'],
    // The headerNames array only needs to include an object for any column names you wish to edit
    headerNames: [{ id: 'activeContactsCount', name: 'Active Contacts' }],
  }}
  table={table}
  tableName={'CustomTable'}
/>

Custom render table content

You can custom render the content of any header or table cell within the columns array.

Headers

To custom render a header, pass a render function to the header value within your column def. Your render function optionally receives one argument info which includes data from the table, header, and column objects.

Cell

To custom render a cell, pass a render function to the cell value within your column def. Your render function optionally receives one argument info which includes data from cell, column, row, table, and the getValue and renderValue methods.


const columns = [
  columnHelper.accessor('name', {
    id: 'name',
    header: 'List Name',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('activeContactsCount', {
    id: 'activeContactsCount',
    header: (info) => {
      // optionally access the info object for any data from column, table, and header
      console.log({ info });
      return <ChipStatus color="mint" children="Active Contacts" />;
    },
  }),
  columnHelper.accessor('createdDate', {
    id: 'createdDate',
    // in addition to the headerStyles prop, this is another way to set a minWidth for a column
    header: () => <div style={{ minWidth: '200px' }}>Created Date</div>,
  }),
  columnHelper.accessor(() => {}, {
    id: 'subscribeBySMS',
    header: 'Subscribe by SMS',
  }),
  columnHelper.accessor(() => {}, {
    id: 'actions',
    header: '',
    cell: (info) => (
      <Button.Fill
        onClick={() => alert(`You selected ${info?.row?.original?.name}`)}
        id={`row-${info?.row?.id}-button`}
      >
        Open
      </Button.Fill>
    ),
  }),
];

Setting initial state values

If you would like to modify the initial state values for selection, sorting, or column visibility, use initialState within the table instance like so:


const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  // To have the table show a given state on first load, use initialState instead of state here
  initialState: {
    // set desc to false for ascending sort and true for descending sort
    sorting: [{ id: 'columnId', desc: false }],
    columnVisibility: {
      // set to true for visible and false for hidden
      columnId: false,
    },
    // set with key [yourRowIdValue] and boolean value "true" for selected items
    rowSelection: {
      rowOneId: true,
      rowTwoId: true,
    },
  },
  enableSorting: true,
  // sorting removal should be disabled across all tables in the product
  enableSortingRemoval: false,
  getSortedRowModel: getSortedRowModel(),
  enableRowSelection: true,
  getRowId: (row) => row.id,
});

Compose your own table

Please check with the Design Systems team before moving forward with a composable version of table so that we can be aware of all cases that should be accommodated.

It is possible to compose your own table using the styled pieces exported from the table component if you need something specific that the configurable Table cannot accomplish.

Not available: The Column Management menu is not available in a composed table, this feature should only be used if using the configured Table in the “Column Management” documentation.


export const ComposedTable: StoryFn = (args) => {
  const { actionable, manualSorting, sortable, showExampleCustomRow, appearance, size } = args;
 
  const [currentData, setCurrentData] = useState<Data[]>([...listTableData]);
  const [columnVisibility, setColumnVisibility] = useState({});
  const [sorting, setSorting] = useState<SortingState>();
  const [rowSelection, setRowSelection] = useState({});
  const [dataUpdateCount, setDataUpdateCount] = useState(0);
 
  const columnHelper = createColumnHelper<Data>();
  const columns = [
    columnHelper.accessor('name', {
      id: 'name',
      header: 'List Name',
      cell: (info) => info.getValue(),
      enableSorting: true,
      sortingFn: (rowA: any, rowB: any, columnId) => {
        console.log('Custom sorting function');
        return rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1;
      },
    }),
    columnHelper.accessor('activeContactsCount', {
      id: 'activeContactsCount',
      header: 'Active Contacts',
      enableSorting: true,
      sortDescFirst: false,
    }),
    columnHelper.accessor('createdDate', {
      id: 'createdDate',
      header: 'Created Date',
      enableSorting: true,
    }),
    columnHelper.accessor(() => {}, {
      id: 'subscribeBySMS',
      header: 'Subscribe by SMS',
      enableSorting: false,
    }),
    columnHelper.accessor(() => {}, {
      id: 'actions',
      header: '',
      enableSorting: false,
    }),
  ];
 
  // you could choose to use custom functions on these state changes if you need to run additional functions/callbacks
  const handleSortingChange = (sortStateUpdater) => {
    console.log('This could be a callback func for when sort state changes');
    console.log(sortStateUpdater());
    setSorting(sortStateUpdater);
  };
  const handleRowSelectionChange = (selectionStateUpdater) => {
    console.log('This could be a callback func for when selection state changes');
    console.log(selectionStateUpdater());
    setRowSelection(selectionStateUpdater);
  };
 
  const table = useReactTable({
    data: currentData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    state: {
      columnVisibility,
      sorting,
      rowSelection,
    },
    enableSorting: sortable,
    enableSortingRemoval: sortable,
    onSortingChange: handleSortingChange,
    getSortedRowModel: sortable ? getSortedRowModel() : undefined,
    manualSorting: manualSorting,
    onColumnVisibilityChange: setColumnVisibility,
    enableRowSelection: actionable,
    onRowSelectionChange: handleRowSelectionChange,
    getRowId: (row) => row.id,
  });
 
  const exampleCustomRow = (
    <TableBodyRow rowId={'CustomTable-ExampleCustomRow'}>
      <TableData styles={{ width: '115px' }}>
        <Button.Fill>Boop</Button.Fill>
      </TableData>
      <TableData>iterate over your data however you want</TableData>
      <TableData>#</TableData>
      <TableData>this is a custom row</TableData>
      <TableData>boop</TableData>
    </TableBodyRow>
  );
 
  const handleAddItem = () => {
    const timesClicked = dataUpdateCount + 1;
    const newListItem = createNewListItem(timesClicked);
    setDataUpdateCount(timesClicked);
    setCurrentData([newListItem, ...currentData]);
  };
 
  return (
    <div>
      <h3>Table sorting state:</h3>
      <pre>{JSON.stringify(table.getState().sorting) ?? '[]'}</pre>
      <h3>Row selection state:</h3>
      <pre>{JSON.stringify(table.getState().rowSelection) ?? '{}'}</pre>
      <Button.Fill onClick={handleAddItem} mb="sp300">
        Add Item
      </Button.Fill>
      <Table
        actionable={actionable}
        appearance={appearance}
        size={size}
        table={table}
        tableName={'CustomTable'}
        columnManagement
      >
        {/* When TableHead is given children, it acts as a wrapper instead of a helper component */}
        <TableHead>
          <TableHeaderRow>
            {table.getFlatHeaders().map((header) => {
              if (header.id === 'actions') return;
 
              // composable example for adding custom styles to th, including minWidth, explicit width, etc
              let headerStyles = {};
              if (header.id === 'name') {
                headerStyles = {
                  minWidth: '120px',
                };
              }
 
              // If column is sortable, render header content inside TableHeaderSortableContent
              const isColumnSortable = header.column.getCanSort();
 
              const content = flexRender(header.column.columnDef.header, header.getContext());
 
              return (
                <TableHeader key={header.id} styles={headerStyles}>
                  {sortable && isColumnSortable ? (
                    <TableHeaderSortableContent header={header}>
                      {content}
                    </TableHeaderSortableContent>
                  ) : (
                    <TableHeaderContent>{content}</TableHeaderContent>
                  )}
                </TableHeader>
              );
            })}
          </TableHeaderRow>
        </TableHead>
        {/* When TableBody is given children, it acts as a wrapper instead of a helper component */}
        <TableBody>
          {showExampleCustomRow && exampleCustomRow}
          {table.getRowModel().rows.map((row) => {
            return (
              <TableBodyRow row={row} key={row.id}>
                {row.getVisibleCells().map((cell) => {
                  // conditionally render cells by column id
                  if (cell.column.id === 'actions') return;
                  return (
                    <TableData key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableData>
                  );
                })}
                <TableData styles={{ textAlign: 'right' }}>
                  <Button.Fill onClick={() => alert(`${row.original.name} button clicked`)}>
                    Open
                  </Button.Fill>
                </TableData>
              </TableBodyRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
};

Appearance and styles

Default appearance


export const MyTable = ({ ...props }) => {
  return (
    <Table
      table={table}
      tableName={'my-table'}
      // this is the default value for the appearance prop
      appearance={'default'}
    />
  );
};

Floating appearance

When the appearance prop is set to floating, the table styles will reflect the “floating” appearance, with borders and outer padding removed.


export const MyTable = ({ ...props }) => {
  return <Table table={table} tableName={'my-table'} appearance={'floating'} />;
};

Default size


export const MyTable = ({ ...props }) => {
  return (
    <Table
      table={table}
      tableName={'my-table'}
      // this is the default value for the size prop
      size={'default'}
    />
  );
};

Compact size

Default size should be used in almost all cases. Compact should be used sparingly. It should never be used on an index page or another page where a user needs to take sets of actions and bulk actions, where the chance for a mis-click is high. Compact tables should be used for relatively information-light tables, or quickly scanning through rows.


export const MyTable = ({ ...props }) => {
  return <Table table={table} tableName={'my-table'} size={'compact'} />;
};

Setting explicit column widths

If you need a column set to a specific width, minWidth, or maxWidth value, use the headerStyles prop to pass an array which includes an object { id: 'columnId', styles: {} } for each column you want to modify. You do not need to include any object for columns that don’t require modifications. The styles object will be provided directly to the corresponding styled <th>.


export const CustomTableWithConfigs = () => {
  // creating a table with 5 columns
  const columnHelper = createColumnHelper<Data>();
  const columns = [
    columnHelper.accessor('name', {
      id: 'name',
      header: 'List Name',
    }),
    columnHelper.accessor('activeContactsCount', {
      id: 'activeContactsCount',
      header: 'Active Contacts',
    }),
    columnHelper.accessor('createdDate', {
      id: 'createdDate',
      header: 'Created Date',
    }),
    columnHelper.accessor(() => {}, {
      id: 'subscribeBySMS',
      header: 'Subscribe by SMS',
    }),
    columnHelper.accessor(() => {}, {
      id: 'actions',
      header: '',
    }),
  ];
 
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
 
  return (
    <Table
      {/* this should only include the columns for which you are modifying styles (does not need to include all column id's) */}
      headerStyles={[
          {
            id: 'name',
            styles: {
              minWidth: '300px',
            },
          },
          {
            id: 'createdDate',
            styles: {
              minWidth: '300px',
            },
          },
          {
            id: 'activeContactsCount',
            styles: {
              minWidth: '300px',
            },
          },
        ]}
      table={table}
      tableName={'CustomTable'}
    />
  );
};

Aligning content

By default, content within table header cells and table data cells is left-aligned. This can be changed to right-aligned by using a custom header or cell render and including a wrapper with a width of 100% and text-align right.


// within the columns array, this column's cells should render a right-aligned button
columnHelper.accessor(() => {}, {
      id: 'actions',
      header: 'Actions',
      cell: (info) => (
        // this wrapping component changes the alignment
        <Styled styles={{ textAlign: 'right', width: '100%' }}>
          <Button.Fill
            onClick={() => alert(`You selected ${info?.row?.original?.name}`)}
            id={`row-${info?.row?.id}-button`}
          >
            Open
          </Button.Fill>
        </Styled>
      ),
    }),

Similar components

Pagination

Divides content into separate pages and provides navigation.