TableFooter

Main DataTable page

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.

<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

<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

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.

Paragon Design System

TableFooter

Rendering with override components

Footer subcomponents

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

TableFooter

Rendering with override components#

Footer subcomponents#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Rendering with override components

Footer subcomponents