TableControlBar

Edit this page Leave feedback

The TableControlBar component is meant to be rendered within a DataTableContext (provided by DataTable here). The context provides necessary information to the control bar, such as the filters and filter state, the selection state of the table, as well as any bulk actions.

It always shows the SmartStatus component. If applicable, it displays the DropdownFilters component, the BulkActions component.

Basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: MultiSelectDropdownFilter,
      filter: 'includesValue',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}
  bulkActions={[
    {
      buttonText: 'Download CSV',
      handleClick: (selectedRows) => console.log('Downloading CSV ', selectedRows),
    },
  ]}
>
  <TableControlBar />
</DataTable>

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: MultiSelectDropdownFilter,
      filter: 'includesValue',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}
  bulkActions={[
    {
      buttonText: 'Download CSV',
      handleClick: (selectedRows) => console.log('Downloading CSV ', selectedRows),
    },
  ]}
>
  <TableControlBar />
</DataTable>