PagingTable
Table component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table.
Name | Description | Default |
---|---|---|
decorations | Visual settings of the various table elements. Where applicable, those settings can be overriden at the column level IPagingTableDecorators | - |
columns | Array of column descriptors IPagingTableColumn[] | - |
data | Array of data objects IDataObject[] | - |
defaultPageSize | Default page size number | 20 |
onFetchData | If specified, a function responsible for loading the data (props: object, Table?: ReactNode) => void | - |
filterable | Whether to display a filtering row boolean | false |
defaultFiltered | The default filtered rows IFilteredProps[] | - |
onFilteredChange | Callback to be called when the filter changes (newFiltering: IFilteredProps[], column: IPagingTableColumn, value: any) => void | - |
loading | Whether to display the loading indicator boolean | false |
manual | If true, the data is sorted manually in the onFetchData function boolean | false |
pages | Number of total pages of data, when loading the data manually number | - |
pageSizeOptions | Array of available page size options ([5, 10, 20, 25, 50, 100]) number[] | - |
minRows | Minimum number of rows to display, even if no data is present number | - |
onPageChange | callback method called when the page changes (page: number) => void | - |
onPageSizeChange | callback method called when the page size changes (newPageSize: number, newPage: number) => void | - |
pivotBy | Array of columns to pivot (group) by string[] | - |
pivotDefaults | Default properties to be passed to the pivot component object | - |
resizable | Whether the columns can be resized boolean | true |
defaultResized | The default resized columns IResizedProps[] | - |
onResizedChange | callback method called when a column is resized (newResized: IResizedProps[], event?: MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
showPagination | Whether to display a paging row boolean | true |
showPaginationTop | Whether to display a paging row on top of the table boolean | - |
showPaginationBottom | Whether to display a paging row at the bottom of the table boolean | - |
sortable | Wheter the table headers will allow sorting of the of the data boolean | true |
defaultSorted | Array of default sorted columns and their sort order IPagingTableSort[] | - |
defaultSortMethod | custom default sorting function (a: any, b: any, desc: boolean) => number | - |
multiSort | Whether to allow multi-column sorting boolean | - |
defaultSortDesc | Whether the default sorting is descending boolean | - |
onSortedChange | callback called when sorted changes (newSorted: IPagingTableSort[], column: IPagingTableColumn, additive: boolean) => void | - |
headerGroups | groups of the header columns IPagingTableColumn[] | - |
hasHeaderGroups | whether the table has any header groups boolean | - |
SubComponent | react node for the expander sub row (row: IRowInfo) => ReactNode | - |
collapseOnSortingChange | Whether to collapse expanded rows on sorting change boolean | - |
collapseOnPageChange | Whether to collapse expanded rows on page change boolean | - |
collapseOnDataChange | Whether to collapse expanded rows on data change boolean | - |
freezeWhenExpanded | Whether to freeze expanded rows boolean | - |
defaultExpanded | The default expanded rows object | - |
column | The default column properties IPagingTableColumn | - |
allVisibleColumns | list of the visible columns IPagingTableColumn[] | - |
expanderDefaults | The default properties of the expander IExpanderProps | - |
expanderTdDefaultProps | default properties for expander Box BoxProps | - |
onExpandedChange | callback called when the expanded changes on a row (newExpanded: IExpanderProps, path: string[], event?: MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
previousText | The string text for 'Previous' pagination link string | - |
nextText | The string text for 'Next' pagination link string | - |
loadingText | The string text for 'loading' label string | - |
noDataText | The string text for 'no data' label string | - |
pageText | The string text for 'Page' pagination label string | - |
ofText | The string text for 'of' pagination label string | - |
rowsText | The string text for 'rows' filtering label string | - |
pivotValKey | String key for pivot value string | - |
pivotIDKey | String key for pivot id string | - |
subRowsKey | String key for sub rows string | - |
aggregatedKey | String key for aggregated string | - |
nestingLevelKey | String key for nesting level string | - |
originalKey | String key for original string | - |
indexKey | String key for index string | - |
groupedByPivotKey | String key for group by pivot string | - |
TableComponent | React component to render the table element ElementType<any> | - |
TheadComponent | React component to render the thead element ElementType<any> | - |
TbodyComponent | React component to render the tbody element ElementType<any> | - |
TrGroupComponent | React component to render the tr group element ElementType<any> | - |
TrComponent | React component to render the tr element ElementType<any> | - |
ThComponent | React component to render the th element ElementType<any> | - |
TdComponent | React component to render the td element ElementType<any> | - |
CellTextComponent | React component to render the cell text element ElementType<any> | - |
TfootComponent | React component to render the tfoot element ElementType<any> | - |
PaginationComponent | React component to render the pagination element ElementType<any> | - |
LoadingComponent | React component to render the loading element ElementType<any> | - |
NoDataComponent | React component to render the 'no-data' element ElementType<any> | - |
ResizerComponent | React component to render the resizer element ElementType<any> | - |
ExpanderComponent | React component to render the expander element ExpanderComponent | - |
PivotValueComponent | React component to render the pivot value element PivotValueComponent | - |
PivotComponent | React component to render the pivot element ElementType<any> | - |
AggregatedComponent | React component to render the aggregated element ElementType<any> | - |
FilterComponent | React component to render the filter element ElementType<any> | - |
PadRowComponent | React component to render the pad row(empty row) element ElementType<any> | - |
getProps | function to return custom props IGetPropsFunc | - |
getTableProps | function to return custom props for the table element BoxComponentProps | - |
getTheadGroupProps | function to return custom props for the thead group lement BoxComponentProps | - |
getTheadGroupTrProps | function to return custom props for the thead group tr element BoxComponentProps | - |
getTheadProps | function to return custom props for the thead element BoxComponentProps | - |
getTheadTrProps | function to return custom props for the thead tr element BoxComponentProps | - |
getTheadThProps | function to return custom props for the thead th element BoxComponentProps | - |
getTheadFilterProps | function to return custom props for the thead filter element BoxComponentProps | - |
getTheadFilterTrProps | function to return custom props for the thead filter tr element BoxComponentProps | - |
getTheadFilterThProps | function to return custom props for the thead filter th element BoxComponentProps | - |
getFilterInputProps | function to return custom props for the thead filter input element IGetPropsFunc | - |
getTbodyProps | function to return custom props for the tbody element BoxComponentProps | - |
getTrGroupProps | function to return custom props for the group tr element BoxComponentProps | - |
getTrProps | function to return custom props for the tr element (rowIndex: number, finalState: IPagingTableState, rowInfo: IRowInfo, column: IPagingTableColumn, Table?: ReactNode) => BoxProps & BoxClickProps | - |
getTdProps | function to return custom props for the group td element BoxComponentProps | - |
getExpanderProps | function to return custom props for the expander element IGetPropsFunc | - |
getTfootProps | function to return custom props for the tfoot element BoxComponentProps | - |
getTfootTrProps | function to return custom props for the tfoot tr element BoxComponentProps | - |
getTfootTdProps | function to return custom props for the tfoot td element BoxComponentProps | - |
getPaginationProps | function to return custom props for the pagination element BoxComponentProps | - |
getLoadingProps | function to return custom props for the loading element BoxComponentProps | - |
getNoDataProps | function to return custom props for the 'no data' element BoxComponentProps | - |
getResizerProps | function to return custom props for the resizer element BoxComponentProps | - |
package | imports | peer |
---|---|---|
grommet ^2.15.0 | ResponsiveContext | * |
react ^17.0.1 | React | * |
styled-components ^5.1.1 | ThemeContext | * |
file | imports |
---|---|
"./StyledPagingTable" | StyledPagingTable |
"./PagingTableProps" | IPagingTableProps |