TableFooter
Main DataTable pageThe 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.
<DataTableisPaginatedinitialState={{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.
<DataTableisPaginatedinitialState={{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.
RowStatusexpects to receivepage,rows, anditemCountfromDataTableContextTablePaginationexpects to receivepageCount,state, andgotoPagefromDataTableContextTablePaginationMinimalexpects to receivenextPage,previousPage,canPreviousPage, andcanNextPagefromDataTableContext
Theme Variables (SCSS)#
$data-table-background-color: $white !default;$data-table-border: 1px solid $gray-200 !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#
RowStatus Props API
- className
stringSpecifies class name to append to the base element.
- statusText
string|elementA 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.