---
title: 'TableFooter'
type: 'component'
components:
- TableFooter
- RowStatus
- TablePagination
- TablePaginationMinimal
categories:
- Table
status: 'New'
designStatus: 'Done'
devStatus: 'In progress'
---

<Link to="/components/datatable/">Main DataTable page</Link>

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

```jsx live
<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
```jsx live
<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>
```

## Footer subcomponents
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`
