DocsCloud UI BusinessTablePro

Introduction

ProTable is built up on Mantine React Table. In principle we don’t change compoent behavior, only with some style changes. So you can refer its documentation directly.

Changes

Pagination

Refer to Mantine React Table Pagination. Basically, you can directly use the props listed on the documentation excepts manualPagination, paginationDisplayMode and positionPagination

NameTypeDescriptionUsage
mantinePaginationPropsPaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }props for paginationdeprecated, please use pagination
paginationDisplayMode’default’, ‘pages’, ‘custom’deprecated
positionPagination’bottom’, ‘top’, ‘both’
paginationPaginationProps & { rowsPerPageOptions?: ComboboxData[], showRowsPerPage?: boolean; showTotal?: boolean, localization?: { total?: string }, wrapperProps?: FlexProps }props for pagination
pagination.valuenumbercurrent page of paginationdeprecated, please use state.pagination.pageIndex
pagination.totalnumbercurrent page size of paginationdeprecated, please use state.pagination.rowCount, table will calculate size internally
pagination vs state.pagination

In general, use the pagintaion to control the style of paginations, such as layout, show or hide total pages. Use state.pagination to control the state of pagination such as changing pageIndex or pageSize

Usage
  1. For client side pagination:
const table = useProTable({
  columns,
  data,
  enablePagination: true,
})
 
<ProTable table={table} />
 
// or
<ProTable data={columns} data={data} enabolePagination />
  1. For manual or server-side pagination
//store pagination state in your own state
const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 5 //customize the default page size
})
 
const table = useProTable({
  columns,
  data,
  manualPagination: true, // set this true
  onPaginationChange: setPagination,
  rowCount: data.meta.totalDBRowCount // you can tell the pagination how many rows there are in your back-end data,
  enablePagination: true,
  state: { pagination }, //pass the pagination state to the table
})
 
<ProTable table={table} />
  1. For pagination UI
const table = useProTable({
  columns,
  data,
  enablePagination: true,
  pagination: {
    wrapperProps: {}, // Props for pagination container
    rowsPerPageOptions: [] // configure rows per page options
    showRowsPerPage: true, // determine whether shows rows per page
    showTotal: true, // determine whether shows total
    localization: { // i18n
      total: 'Total' // default is 'Total:`
    }
  }
})
 
<ProTable table={table} />
TableBasicTransferTree