Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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.

Rendering with override components

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

  • RowStatus expects to receive page, rows, and itemCount from DataTableContext
  • TablePagination expects to receive pageCount, state, and gotoPage from DataTableContext
  • TablePaginationButtonGroup expects to receive nextPage, previousPage, canPreviousPage, and canNextPage from DataTableContext
TableFooter Props API
  • children
    func | node | func | node[]

    Specifies the content of the TableFooter

    Default<> <RowStatus /> <TablePagination /> <TablePaginationButtonGroup /> </>
  • className
    string

    Specifies class name to append to the base element.

    Defaultnull
RowStatus Props API
  • className
    string

    Specifies class name to append to the base element.

TablePagination Props API
This component does not receive any props.
TablePaginationButtonGroup Props API
This component does not receive any props.

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)