TableFooter

The TableFooter component is meant to be rendered within a DataTableContext (provided by DataTable here). By default, it shows how many items are being displayed on the left, pagination dropdown in the middle, and navigation buttons on the right. Alternately, it will accept children.

Basic Usage

Show editable code example

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

<DataTable
  isPaginated
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
    },
  ]}
  itemCount={7}
  data={[
      {
        name: 'Lil Bub',
        color: 'brown tabby',
        famous_for: 'weird tongue',
      },
      {
        name: 'Grumpy Cat',
        color: 'siamese',
        famous_for: 'serving moods',
      },
      {
        name: 'Smoothie',
        color: 'orange tabby',
        famous_for: 'modeling',
      },
      {
        name: 'Maru',
        color: 'brown tabby',
        famous_for: 'being a lovable oaf',
      },
      {
        name: 'Keyboard Cat',
        color: 'orange tabby',
        famous_for: 'piano virtuoso',
      },
      {
        name: 'Long Cat',
        color: 'russian white',
        famous_for:
          'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      },
      {
        name: 'Zeno',
        color: 'brown tabby',
        famous_for: 'getting halfway there'
      },
    ]}
>
  <TableFooter />
</DataTable>

<DataTable
  isPaginated
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
    },
  ]}
  itemCount={7}
  data={[
      {
        name: 'Lil Bub',
        color: 'brown tabby',
        famous_for: 'weird tongue',
      },
      {
        name: 'Grumpy Cat',
        color: 'siamese',
        famous_for: 'serving moods',
      },
      {
        name: 'Smoothie',
        color: 'orange tabby',
        famous_for: 'modeling',
      },
      {
        name: 'Maru',
        color: 'brown tabby',
        famous_for: 'being a lovable oaf',
      },
      {
        name: 'Keyboard Cat',
        color: 'orange tabby',
        famous_for: 'piano virtuoso',
      },
      {
        name: 'Long Cat',
        color: 'russian white',
        famous_for:
          'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      },
      {
        name: 'Zeno',
        color: 'brown tabby',
        famous_for: 'getting halfway there'
      },
    ]}
>
  <TableFooter />
</DataTable>

Rendering with override components

Show editable code example

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

<DataTable
  isPaginated
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
  ]}
  itemCount={7}
  data={[
      {
        name: 'Lil Bub',
        color: 'brown tabby',
        famous_for: 'weird tongue',
      },
      {
        name: 'Grumpy Cat',
        color: 'siamese',
        famous_for: 'serving moods',
      },
      {
        name: 'Maru',
        color: 'brown tabby',
        famous_for: 'being a lovable oaf',
      },
      {
        name: 'Keyboard Cat',
        color: 'orange tabby',
        famous_for: 'piano virtuoso',
      },
    ]}
>
  <TableFooter>
    <div>Custom component</div>
    <div>More custom data</div>
    <TablePagination />
  </TableFooter>
</DataTable>

<DataTable
  isPaginated
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
  ]}
  itemCount={7}
  data={[
      {
        name: 'Lil Bub',
        color: 'brown tabby',
        famous_for: 'weird tongue',
      },
      {
        name: 'Grumpy Cat',
        color: 'siamese',
        famous_for: 'serving moods',
      },
      {
        name: 'Maru',
        color: 'brown tabby',
        famous_for: 'being a lovable oaf',
      },
      {
        name: 'Keyboard Cat',
        color: 'orange tabby',
        famous_for: 'piano virtuoso',
      },
    ]}
>
  <TableFooter>
    <div>Custom component</div>
    <div>More custom data</div>
    <TablePagination />
  </TableFooter>
</DataTable>

These components can be rendered independently of the TableFooter component with a DataTableContext: RowStatus, TablePagination, TablePaginationMinimal.

RowStatus expects to receive page, rows, and itemCount from DataTableContext
TablePagination expects to receive pageCount, state, and gotoPage from DataTableContext
TablePaginationMinimal expects to receive nextPage, previousPage, canPreviousPage, and canNextPage from DataTableContext

Theme Variables (SCSS)#

$data-table-background-color:  $white !default;
$data-table-border:  1px solid $gray-200 !default;
$data-table-box-shadow:  $box-shadow-sm !default;
$data-table-padding-x:  .75rem !default;
$data-table-padding-y:  .75rem !default;
$data-table-padding-small:  .5rem !default;
$data-table-cell-padding:  .5rem .75rem !default;
$data-table-footer-position:  center !default;
$data-table-pagination-dropdown-max-height:  60vh !default;
$data-table-pagination-dropdown-min-width:  6rem !default;
$data-table-layout-sidebar-width:  12rem !default;

Props API#

TableFooter Props API

children func | node | func | node[]
Specifies the content of the TableFooter
Defaultnull
className string
Specifies class name to append to the base element.

RowStatus Props API

className string
Specifies class name to append to the base element.
statusText string | element
A text describing how many rows is shown in the table.

TablePagination Props API

This component does not receive any props.

TablePaginationMinimal Props API

This component does not receive any props.

Leave feedback

Paragon Design System

Theme

TableFooter

Basic Usage

Rendering with override components

Footer subcomponents

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Theme

TableFooter

Basic Usage#

Rendering with override components#

Footer subcomponents#

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Basic Usage

Rendering with override components

Footer subcomponents