@yester/virtual-table 1.0.0

package/README.md

@@ -0,0 +1,168 @@
+# Virtual Table
+
+A high-performance virtual scrolling table component for React, supporting Pivot Table, Group Table, and Detail Table modes. Capable of handling large datasets efficiently using `react-window`.
+
+## Features
+
+- 🚀 **High Performance**: Renders thousands of rows smoothly using virtual scrolling.
+- 📊 **Pivot Table**: Supports multi-dimensional data analysis with row/column grouping and aggregation.
+- 📑 **Group Table**: Supports row grouping with expandable/collapsible rows.
+- 📋 **Detail Table**: Standard list view for detailed data.
+- 🔄 **Sortable**: Supports sorting on multiple fields.
+- 🎨 **Customizable**: Flexible styling and cell rendering.
+- 📦 **Lightweight**: No heavy dependencies (lodash removed, icons extracted).
+
+## Installation
+
+```bash
+pnpm add virtual-table
+# or
+npm install virtual-table
+# or
+yarn add virtual-table
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { VirtualTable } from 'virtual-table';
+import 'virtual-table/dist/style.css'; // Import styles
+
+const App = () => {
+  const data = [
+    { province: 'Zhejiang', city: 'Hangzhou', type: 'Furniture', amount: 10 },
+    // ... more data
+  ];
+
+  const params = {
+    data,
+    meta: [],
+    sortParams: [],
+    fields: {
+      rows: [{ field: 'province', title: 'Province', width: 150 }],
+      columns: [{ field: 'type', title: 'Type', width: 120 }],
+      values: [{ field: 'amount', title: 'Amount', calculateType: 'sum', width: 100 }]
+    }
+  };
+
+  return (
+    <div style={{ height: 500 }}>
+      <VirtualTable
+        {...params}
+        scroll={{ y: 500 }}
+      />
+    </div>
+  );
+};
+```
+
+## Modes
+
+### 1. Pivot Table Mode
+Configure `rows`, `columns`, and `values` in `fields`.
+
+```tsx
+const pivotFields = {
+  rows: [
+    { field: 'province', title: 'Province', width: 120, total: { enabled: true, label: 'Total' } },
+    { field: 'city', title: 'City', width: 120 }
+  ],
+  columns: [
+    { field: 'type', title: 'Type', width: 120 }
+  ],
+  values: [
+    { field: 'amount', title: 'Amount', calculateType: 'sum', width: 100 }
+  ]
+};
+```
+
+### 2. Group Table Mode
+Configure `rows` and `values`, leave `columns` empty.
+
+```tsx
+const groupFields = {
+  rows: [
+    { field: 'province', title: 'Province', width: 120 },
+    { field: 'city', title: 'City', width: 120 }
+  ],
+  columns: [],
+  values: [
+    { field: 'amount', title: 'Amount', calculateType: 'sum', width: 100 }
+  ]
+};
+```
+
+### 3. Detail Table Mode
+Configure only `values` as a flat list of columns.
+
+```tsx
+const detailFields = {
+  rows: [],
+  columns: [],
+  values: [
+    { field: 'province', title: 'Province', width: 120 },
+    { field: 'city', title: 'City', width: 120 },
+    { field: 'amount', title: 'Amount', width: 100 }
+  ]
+};
+```
+
+## API
+
+### VirtualTable Props
+
+| Property | Type | Description |
+|Data | `any[]` | Source data array |
+| `fields` | `PivotFields` | Configuration for rows, columns, and values |
+| `meta` | `any[]` | Meta information (optional) |
+| `sortParams` | `SortParam[]` | Sorting configuration |
+| `scroll` | `{ x?: number \| string; y?: number \| string }` | Scroll configuration. `y` is required for virtual scrolling height |
+| `className` | `string` | Custom CSS class |
+| `style` | `React.CSSProperties` | Custom styles |
+
+### PivotFields
+
+```typescript
+interface PivotFields {
+    rows: CustomTreeNode[];    // Row dimensions
+    columns: CustomTreeNode[]; // Column dimensions
+    values: CustomTreeNode[];  // Value fields (metrics)
+}
+```
+
+### CustomTreeNode (Field Configuration)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `field` | `string` | Data field key |
+| `title` | `ReactNode` | Column header title |
+| `width` | `number \| string` | Column width |
+| `calculateType` | `'sum' \| 'avg' \| 'count' ...` | Aggregation type (for values) |
+| `total` | `{ enabled: boolean; label?: string }` | Subtotal configuration (for rows) |
+| `emptyReplace` | `string` | Replacement for empty values |
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run dev server
+pnpm dev
+
+# Build library
+pnpm build
+
+# Run tests
+pnpm test
+
+# Release (Test -> Build -> Publish)
+pnpm release
+```
+
+## License
+
+MIT

package/dist/components/Icons/DownCircleOutlined.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const DownCircleOutlined: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default DownCircleOutlined;

package/dist/components/Icons/UpCircleOutlined.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const UpCircleOutlined: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default UpCircleOutlined;

package/dist/components/VirtualTable/Cell.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { DataCell, CustomTreeNode, MetaItem } from '../../types';
+
+export interface CellProps {
+    columnIndex: number;
+    rowIndex: number;
+    style: React.CSSProperties;
+    mergedData: DataCell[][];
+    columns: CustomTreeNode[];
+    data: any[];
+    handleExpand: (record: any) => void;
+    meta?: MetaItem[];
+}
+declare const Cell: React.FC<CellProps>;
+export default Cell;

package/dist/components/VirtualTable/Renderer.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { TableRow, CustomTreeNode, MetaItem } from '../../types';
+
+interface RendererProps {
+    data: TableRow[];
+    info: {
+        ref: any;
+        onScroll: (props: {
+            scrollLeft: number;
+            scrollTop: number;
+        }) => void;
+        scrollbarSize?: number;
+    };
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    columns: CustomTreeNode[];
+    tableWidth: number;
+    gridWidth: number;
+    handleExpand: (record: any) => void;
+    meta?: MetaItem[];
+}
+declare const Renderer: React.FC<RendererProps>;
+export default Renderer;

package/dist/components/VirtualTable/TableHeader.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { CustomTreeNode } from '../../types';
+
+interface TableHeaderProps {
+    columns: CustomTreeNode[];
+    width: number;
+    onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default TableHeader;

package/dist/components/VirtualTable/index.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { PivotParams } from '../../types';
+
+interface VirtualTableProps extends PivotParams {
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: React.MemoExoticComponent<(props: VirtualTableProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as VirtualTable } from './components/VirtualTable';
+export * from './types';
+export { dataHandler } from './utils/dataHandler';
+export { default as pivotDataHandler } from './utils/pivotHandler';

package/dist/style.css

@@ -0,0 +1 @@
+.virtual-table .virtual-table-container:before,.virtual-table .virtual-table-container:after{display:none}.virtual-table,.virtual-table .virtual-table{--virtual-table-scrollbar-width: 0px !important}.virtual-table table{table-layout:fixed!important;width:100%!important;border-spacing:0}.virtual-table .virtual-table-header th.virtual-table-cell{background:#fafafa;border-bottom:1px solid #e8e8e8;font-weight:500;padding:10px 16px;border-right:1px solid #e8e8e8;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.virtual-table .virtual-table-thead>tr:first-child>th{border-top:1px solid #e8e8e8}.virtual-table .virtual-table-thead>tr>th:first-child{border-left:1px solid #e8e8e8}.virtual-table .virtual-table-thead>tr:not(:last-child)>th[colspan]{border-bottom:1px solid #e8e8e8}.virtual-table-cell{box-sizing:border-box;padding:10px 16px;line-height:1.5;border-bottom:1px solid #e8e8e8;background:#fff}[data-theme=dark] .virtual-table-cell{box-sizing:border-box;line-height:1.5;padding:10px 16px;border-bottom:1px solid #303030;background:#141414}[data-theme=dark] .virtual-table .virtual-table-header th.virtual-table-cell{background:#1d1d1d;border-bottom:1px solid #303030;border-right:1px solid #303030}[data-theme=dark] .virtual-table .virtual-table-thead>tr:not(:last-child)>th[colspan]{border-bottom:1px solid #303030}.expand-icon{cursor:pointer;color:var(--primary-color);margin-right:4px;line-height:0}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+

package/dist/types/index.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+
+export interface CustomTreeNode {
+    /**
+     * 字段唯一标识
+     */
+    field: string;
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 是否收起（默认都展开）
+     * @description 优先级 `collapseFields` > `expandDepth` > `collapseAll` > `collapsed`
+     */
+    collapsed?: boolean;
+    /**
+     * 字段描述
+     */
+    description?: string;
+    /**
+     * 子节点
+     */
+    children?: CustomTreeNode[];
+    width?: number | string;
+    total?: {
+        enabled: boolean;
+        label?: string;
+        position?: 'top' | 'bottom';
+    };
+    emptyReplace?: string;
+    calculateType?: 'sum' | 'avg' | 'count' | 'min' | 'max' | 'd_count' | 'variance' | 'stddev';
+    sort?: {
+        enabled: boolean;
+        type: 'asc' | 'desc';
+    };
+    style?: React.CSSProperties;
+    fixed?: boolean | string;
+    colSpan?: number;
+    dataIndex?: string;
+    render?: (val: any, record: any, index: number) => React.ReactNode;
+    type?: string;
+}
+export interface DataCell {
+    content: string | number | null | undefined;
+    rowspan: number;
+    colspan: number;
+    data?: any;
+    rowKey?: string;
+    expandable?: boolean;
+    expanded?: boolean;
+    level?: number;
+    onClick?: (record: any) => void;
+    style?: React.CSSProperties;
+}
+export interface TableRow {
+    cells: DataCell[];
+    rowKey: string;
+}
+export interface MetaItem {
+    field?: string;
+    title?: string;
+    description?: string;
+    clickHandler?: (data: any) => void;
+}
+export interface SortParam {
+    field: string;
+    sortType: 'asc' | 'desc';
+}
+export interface PivotFields {
+    rows: CustomTreeNode[];
+    columns: CustomTreeNode[];
+    values: CustomTreeNode[];
+}
+export interface PivotParams {
+    data: any[];
+    meta: MetaItem[];
+    sortParams: SortParam[];
+    fields: PivotFields;
+}

package/dist/utils/cloneDeep.d.ts

@@ -0,0 +1 @@
+export declare const cloneDeep: <T>(obj: T) => T;

package/dist/utils/dataHandler.d.ts

@@ -0,0 +1,47 @@
+import { PivotParams, DataCell, TableRow } from '../types';
+
+export declare const dataHandler: (params: PivotParams) => {
+    list: never[];
+    dataExpandFilter: (list: any[]) => any[];
+    tableColumns?: undefined;
+} | {
+    list: {
+        cells: DataCell[];
+        rowKey: string;
+    }[];
+    dataExpandFilter: (list: TableRow[]) => TableRow[];
+    tableColumns: import('../types').CustomTreeNode[];
+} | {
+    list: never[];
+    dataExpandFilter: (l: any) => any;
+    tableColumns?: undefined;
+} | {
+    list: TableRow[];
+    dataExpandFilter: (l: any[]) => any[];
+    tableColumns: {
+        width: string | number;
+        key: string;
+        field: string;
+        title?: string;
+        collapsed?: boolean;
+        description?: string;
+        children?: import('../types').CustomTreeNode[];
+        total?: {
+            enabled: boolean;
+            label?: string;
+            position?: "top" | "bottom";
+        };
+        emptyReplace?: string;
+        calculateType?: "sum" | "avg" | "count" | "min" | "max" | "d_count" | "variance" | "stddev";
+        sort?: {
+            enabled: boolean;
+            type: "asc" | "desc";
+        };
+        style?: React.CSSProperties;
+        fixed?: boolean | string;
+        colSpan?: number;
+        dataIndex?: string;
+        render?: (val: any, record: any, index: number) => React.ReactNode;
+        type?: string;
+    }[];
+};

package/dist/utils/pivotHandler.d.ts

@@ -0,0 +1,15 @@
+import { CustomTreeNode, PivotParams, DataCell, TableRow } from '../types';
+
+declare const pivotDataHandler: (params: PivotParams) => {
+    list: never[];
+    dataExpandFilter: (list: any[]) => any[];
+    tableColumns?: undefined;
+} | {
+    list: {
+        cells: DataCell[];
+        rowKey: string;
+    }[];
+    dataExpandFilter: (list: TableRow[]) => TableRow[];
+    tableColumns: CustomTreeNode[];
+};
+export default pivotDataHandler;

package/dist/utils/vars.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 表格中，单元格的值为该值时不显示单元格
+ * 用于与空值区分
+ */
+export declare const DISPLAY_NONE = "display__none";
+export declare const ROW_HEIGHT = 43;
+export declare const COL_WIDTH = 100;
+export declare const EMPTY_VALUE = "-";
+export declare const TOTAL_DEFAULT_VALUE = "\u5408\u8BA1";