A pack of extensions for grommet 2
created:4/21/2021
updated:4/21/2021
source lines:69
comments %:6

PagingTable

grommet-controls
3.0.1

Table component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table.

import { PagingTable } from 'grommet-controls';

Main

Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44

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

ElementType<IExpanderComponentProps>
-
PivotValueComponent

React component to render the pivot value element

ElementType<IPivotValueComponentProps>
-
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
-

Commits

Date
Author
Commit Message
8/31/2020

atanasster

update stories titles and navigation
8/30/2020

atanasster

update eslint and add component-controls
8/27/2019

atanasster

initial commit 2.x alpha
3 commits

package
imports
peer
grommet
^2.15.0
ResponsiveContext
*
react
^17.0.1
React
*
ThemeContext
*

file
imports
"./StyledPagingTable"
StyledPagingTable
"./PagingTableProps"
IPagingTableProps

Stories

Simple

Item
Qty
Price
Total
Fork
4
5.5
22
Knife
3
2.5
7.5
Spoon
2
6.5
13
Page
of 1