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:  2px solid $light-300 !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 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.

Usage Insights#

TableFooter

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	21.5.6	1

Edit this page Leave feedback

Paragon Design System

Theme

TableFooter

Basic Usage

Rendering with override components

Footer subcomponents

Theme Variables (SCSS)#

Props API#

Usage Insights#

TableFooter

All components (A-Z)

Theme

TableFooter

Basic Usage#

Rendering with override components#

Footer subcomponents#

Theme Variables (SCSS)#

Props API#

Usage Insights#

TableFooter

All components (A-Z)

Basic Usage

Rendering with override components

Footer subcomponents