@yester/virtual-table 1.0.0 → 1.1.1

package/README.md

@@ -127,22 +127,91 @@ const detailFields = {
 
 ```typescript
 interface PivotFields {
-    rows: CustomTreeNode[];    // Row dimensions
-    columns: CustomTreeNode[]; // Column dimensions
-    values: CustomTreeNode[];  // Value fields (metrics)
+    rows: DimensionNode[];    // Row dimensions
+    columns: DimensionNode[]; // Column dimensions
+    values: MetricNode[];     // Value fields (metrics)
 }
 ```
 
-### CustomTreeNode (Field Configuration)
+### Field Configuration
+
+#### DimensionNode (Rows & Columns)
 
 | Property | Type | Description |
 |----------|------|-------------|
 | `field` | `string` | Data field key |
-| `title` | `ReactNode` | Column header title |
+| `title` | `string` | 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) |
+| `total` | `{ enabled: boolean; label?: string }` | Subtotal configuration |
+| `collapsed` | `boolean` | Whether the dimension is collapsed by default |
+| `sort` | `{ enabled: boolean; type: 'asc' \| 'desc' }` | Sort configuration |
+
+#### MetricNode (Values)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `field` | `string` | Data field key or unique key for expression |
+| `title` | `string` | Header title |
+| `width` | `number \| string` | Column width |
+| `calculateType` | `'sum' \| 'avg' \| 'count' \| 'min' \| 'max' \| 'd_count' \| 'expr'` | Aggregation type |
+| `expression` | `string` | Expression for calculation (e.g. `'{amount} * {price}'`) |
+| `formatter` | `(val: any, record: any) => ReactNode` | Cell content formatter |
 | `emptyReplace` | `string` | Replacement for empty values |
+| `hidden` | `boolean` | Whether to hide this metric column |
+
+## Advanced Usage
+
+### Calculated Fields
+
+You can define a new metric based on other metrics using `calculateType: 'expr'` and `expression`. Variables in `{}` refer to other metric fields.
+
+```tsx
+values: [
+  { field: 'amount', title: 'Amount', calculateType: 'sum' },
+  { field: 'price', title: 'Price', calculateType: 'avg' },
+  { 
+    field: 'total_value', 
+    title: 'Total Value', 
+    calculateType: 'expr', 
+    expression: '{amount} * {price}' 
+  }
+]
+```
+
+### Cell Formatting
+
+Use `formatter` to customize cell rendering, such as adding currency symbols or returning React components.
+
+```tsx
+values: [
+  { 
+    field: 'price', 
+    title: 'Price', 
+    formatter: (val) => <span style={{ color: 'red' }}>¥{val}</span> 
+  }
+]
+```
+
+### Nested Column Headers
+
+Simply add multiple dimensions to `columns` in `PivotFields` to create nested headers.
+
+```tsx
+columns: [
+  { field: 'year', title: 'Year', width: 100 }, // Top level
+  { field: 'quarter', title: 'Quarter', width: 100 } // Sub level
+]
+```
+
+### Default Collapsed State
+
+Set `collapsed: true` on a row dimension to collapse it by default.
+
+```tsx
+rows: [
+  { field: 'province', title: 'Province', collapsed: true }
+]
+```
 
 ## Development
 

package/dist/style.css

@@ -1 +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}
+.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}.virtual-table-cell-link{cursor:pointer;text-decoration:none;color:var(--primary-color)}.virtual-table-cell-link:hover{color:var(--primary-color-hover)}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface CustomTreeNode {
+export interface BaseNode {
     /**
      * 字段唯一标识
      */
@@ -9,38 +9,47 @@ export interface CustomTreeNode {
      * 标题
      */
     title?: string;
-    /**
-     * 是否收起（默认都展开）
-     * @description 优先级 `collapseFields` > `expandDepth` > `collapseAll` > `collapsed`
-     */
-    collapsed?: boolean;
     /**
      * 字段描述
      */
     description?: string;
+    width?: number | string;
+    style?: React.CSSProperties;
+    fixed?: boolean | string;
+    colSpan?: number;
+    dataIndex?: string;
+    hidden?: boolean;
+    key?: string;
+    children?: BaseNode[];
+}
+export interface DimensionNode extends BaseNode {
     /**
-     * 子节点
+     * 是否收起（默认都展开）
+     * @description 优先级 `collapseFields` > `expandDepth` > `collapseAll` > `collapsed`
      */
-    children?: CustomTreeNode[];
-    width?: number | string;
+    collapsed?: boolean;
     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;
+    clickExpandChildren?: boolean;
+    children?: DimensionNode[];
+}
+export interface MetricNode extends BaseNode {
+    emptyReplace?: string;
+    calculateType?: 'sum' | 'avg' | 'count' | 'min' | 'max' | 'd_count' | 'variance' | 'stddev' | 'expr';
+    expression?: string;
     render?: (val: any, record: any, index: number) => React.ReactNode;
+    formatter?: (val: any, record: any) => React.ReactNode;
     type?: string;
+    children?: MetricNode[];
 }
+export type CustomTreeNode = DimensionNode | MetricNode;
 export interface DataCell {
     content: string | number | null | undefined;
     rowspan: number;
@@ -68,9 +77,9 @@ export interface SortParam {
     sortType: 'asc' | 'desc';
 }
 export interface PivotFields {
-    rows: CustomTreeNode[];
-    columns: CustomTreeNode[];
-    values: CustomTreeNode[];
+    rows: DimensionNode[];
+    columns: DimensionNode[];
+    values: MetricNode[];
 }
 export interface PivotParams {
     data: any[];

package/dist/utils/dataHandler.d.ts

@@ -21,27 +21,20 @@ export declare const dataHandler: (params: PivotParams) => {
     tableColumns: {
         width: string | number;
         key: string;
+        emptyReplace?: string;
+        calculateType?: "sum" | "avg" | "count" | "min" | "max" | "d_count" | "variance" | "stddev" | "expr";
+        expression?: string;
+        render?: (val: any, record: any, index: number) => React.ReactNode;
+        formatter?: (val: any, record: any) => React.ReactNode;
+        type?: string;
+        children?: import('../types').MetricNode[];
         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;
+        hidden?: boolean;
     }[];
 };