srp-table

srp-table is a high-performance table component library for React applications. It is designed for data-intensive UIs and supports two integration styles:

• direct prop-based usage with BaseTable
• composable enhancement through pipeline and feature plugins

The library also exposes customizable component injection points and feature slots so teams can adapt rendering, interaction, and business behaviors without rewriting the rendering core.

Project Status

This project is forked from alibaba/ali-react-table.

The fork keeps the original MIT licensing model. Please retain the upstream attribution and license terms when redistributing or modifying the codebase.

Highlights

• high-performance rendering for large datasets
• sticky header and sticky footer support
• left and right locked columns
• horizontal and vertical virtualization
• tree data, row detail, sorting, and other pipeline-driven features
• pluggable renderers and component slots for customization
• pivot table entry for cross-table and cross-tree-table scenarios

Installation

npm install @guozhi5658/srp-table

Quick Start

BaseTable

import { BaseTable } from '@guozhi5658/srp-table'

const columns = [
  { code: 'name', name: 'Name', width: 180 },
  { code: 'status', name: 'Status', width: 120 },
]

const dataSource = [
  { id: '1', name: 'Alpha', status: 'Ready' },
  { id: '2', name: 'Beta', status: 'Running' },
]

export function DemoTable() {
  return (
    <BaseTable
      primaryKey="id"
      columns={columns}
      dataSource={dataSource}
      isStickyHeader
    />
  )
}

Pipeline

import { BaseTable, features, useTablePipeline } from '@guozhi5658/srp-table'

export function PipelineDemo({ columns, dataSource }) {
  const pipeline = useTablePipeline()

  const tableProps = pipeline
    .input({ columns, dataSource })
    .primaryKey('id')
    .use(
      features.sort({
        mode: 'multiple',
      }),
    )
    .getProps()

  return <BaseTable {...tableProps} />
}

Fill Remaining Width

Use features.fillRemainingWidth() when you want fixed-width columns to keep their original widths as the container grows. Instead of stretching existing columns proportionally, the table appends a blank column on the right to absorb the remaining space.

import { BaseTable, features, useTablePipeline } from '@guozhi5658/srp-table'

export function FixedWidthDemo({ columns, dataSource }) {
  const pipeline = useTablePipeline()

  const tableProps = pipeline
    .input({ columns, dataSource })
    .primaryKey('id')
    .use(features.fillRemainingWidth())
    .getProps()

  return (
    <BaseTable
      {...tableProps}
      defaultColumnWidth={140}
      isStickyHeader
    />
  )
}

This feature is designed for the pipeline path and works with defaultColumnWidth, locked columns, and the table's built-in virtualization logic.

Playground

Run the local playground to develop and validate new features against the built-in flat, tree, and row-detail mock datasets:

npm install
npm run playground

The playground is intended for iterative feature work in a real React runtime and is the fastest way to verify layout, interaction, sticky behavior, and virtualization changes.

Build

npm run build

Build artifacts are emitted to dist/, including:

• dist/srp-table.js
• dist/srp-table.esm.js
• dist/srp-table.d.ts
• dist/srp-table-pivot.js
• dist/srp-table-pivot.esm.js
• dist/srp-table-pivot.d.ts

License

MIT. This fork is based on alibaba/ali-react-table, and the upstream attribution should be preserved.