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

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
TableFooter Props API
  • children func | node | func | node[]

    Specifies the content of the TableFooter

    Default<> <RowStatus /> <TablePagination /> <TablePaginationMinimal /> </>
  • 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.

  • 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.

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)