ProTable

An advanced data table built on Mantine React Table with customized styling, pagination, sorting, and expansion support.

Import

import { ProTable, useProTable, TablePagination } from '@tidbcloud/uikit/biz'

Basic Usage

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
const data = [
  { id: 1, name: 'John', email: 'john@example.com', status: 'Active' },
  { id: 2, name: 'Jane', email: 'jane@example.com', status: 'Inactive' }
]
 
const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'status', header: 'Status' }
]
 
function Demo() {
  const table = useProTable({ data, columns })
  return <ProTable table={table} />
}

With Pagination

Client-side Pagination

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data,
    columns,
    enablePagination: true
  })
 
  return <ProTable table={table} />
}

Server-side Pagination

import { useState } from 'react'
import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10
  })
 
  const table = useProTable({
    data,
    columns,
    manualPagination: true,
    onPaginationChange: setPagination,
    rowCount: totalCount, // Total rows from server
    enablePagination: true,
    state: { pagination }
  })
 
  return <ProTable table={table} />
}

Pagination UI Options

const table = useProTable({
  data,
  columns,
  enablePagination: true,
  pagination: {
    rowsPerPageOptions: ['10', '20', '50', '100'],
    showRowsPerPage: true,
    showTotal: true,
    localization: {
      total: 'Total:'
    }
  }
})

With Sorting

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data,
    columns,
    enableSorting: true
  })
 
  return <ProTable table={table} />
}

With Row Expansion

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data,
    columns,
    enableExpanding: true,
    renderDetailPanel: ({ row }) => <div>Details for {row.original.name}</div>
  })
 
  return <ProTable table={table} />
}

With Virtual Scrolling

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data: largeDataset,
    columns,
    enableRowVirtualization: true
  })
 
  return <ProTable table={table} />
}

Sticky Header

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data,
    columns,
    enableStickyHeader: true
  })
 
  return <ProTable table={table} />
}

Loading State

import { ProTable, useProTable } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const table = useProTable({
    data: [],
    columns,
    loading: true
  })
 
  return <ProTable table={table} />
}

Props

Prop	Type	Default	Description
`table`	`MRT_TableInstance`	-	Table instance from useProTable
`data`	`T[]`	-	Table data
`columns`	`MRT_ColumnDef[]`	-	Column definitions
`withBorder`	`boolean`	`true`	Show table border
`emptyText`	`string`	-	Empty state message
`errorText`	`string`	-	Error state message
`loading`	`boolean`	`false`	Loading state
`enablePagination`	`boolean`	`false`	Enable pagination
`enableSorting`	`boolean`	`false`	Enable sorting
`enableExpanding`	`boolean`	`false`	Enable row expansion
`enableStickyHeader`	`boolean`	-	Sticky header
`enableStickyFooter`	`boolean`	-	Sticky footer
`enableRowVirtualization`	`boolean`	`false`	Virtual scrolling
`pagination`	`PaginationConfig`	-	Pagination configuration
`wrapperProps`	`BoxProps`	-	Wrapper props

Pagination Config

Prop	Type	Default	Description
`rowsPerPageOptions`	`string[]`	`['5','10','15','20','25','30','50','100']`	Page size options
`showRowsPerPage`	`boolean`	`false`	Show page size selector
`showTotal`	`boolean`	`false`	Show total count
`wrapperProps`	`FlexProps`	-	Wrapper props
`localization.total`	`string`	`'Total:'`	Total label text

Exports

Export	Description
`ProTable`	Main table component
`useProTable`	Hook for creating table instance
`TablePagination`	Standalone pagination component

ProTable supports all Mantine React Table options.

TableBasic TransferTree