jd-opensource · tinymins · May 29, 2024 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -130,6 +130,7 @@ const DRIP_TABLE_SIDEBAR = [
           { title: '行尾插槽 rowFooter', link: '/drip-table/schema/row-footer' },
           { title: '行列合并 span', link: '/drip-table/schema/span' },
           { title: '空表提示 emptyText', link: '/drip-table/schema/empty-text' },
+          { title: '默认排序 initialSorter', link: '/drip-table/schema/initial-sorter' },
           { title: '子表 subtable', link: '/drip-table/schema/subtable' },
         ],
       },
@@ -208,7 +209,9 @@ const DRIP_TABLE_SIDEBAR = [
         children: [
           { title: '目录', link: '/drip-table/api' },
           { title: '展示列 displayColumnKeys', link: '/drip-table/api/display-column-keys' },
-          { title: '展示列 setDisplayColumnKeys', link: '/drip-table/api/set-display-column-keys' },
+          { title: '设置展示列 setDisplayColumnKeys', link: '/drip-table/api/set-display-column-keys' },
+          { title: '排序器 sorter', link: '/drip-table/api/sorter' },
+          { title: '设置排序器 setSorter', link: '/drip-table/api/set-sorter' },
         ],
       },
       {

diff --git a/docs/drip-table/api/index.md b/docs/drip-table/api/index.md
@@ -13,3 +13,5 @@ toc: content
 | ----- | ---- | ---- | ---- |
 | [displayColumnKeys](/drip-table/api/display-column-keys) | 表格展示列 | × | [🔗 示例](/drip-table/api/display-column-keys) |
 | [setDisplayColumnKeys](/drip-table/api/set-display-column-keys) | 设置表格展示列 | × | [🔗 示例](/drip-table/api/set-display-column-keys) |
+| [sorter](/drip-table/api/sorter) | 表格排序器 | × | [🔗 示例](/drip-table/api/sorter) |
+| [setSorter](/drip-table/api/set-sorter) | 设置表格排序器 | × | [🔗 示例](/drip-table/api/set-sorter) |
diff --git a/docs/drip-table/api/set-sorter.md b/docs/drip-table/api/set-sorter.md
@@ -0,0 +1,125 @@
+---
+title: 设置排序器 setSorter
+toc: content
+---
+
+## 设置表格排序器 setSorter
+
+- 描述：设置表格排序器，设置当前表格排序器数据
+- 类型：`(sorter: IDripTableContext<RecordType, ExtraOptions>['state']['sorter']) => void`
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ * hideActions: ["CSB"]
+ */
+import { message, Button } from "antd";
+import React from "react";
+import DripTable from "drip-table";
+
+const schema = {
+  columns: [
+    {
+      key: "mock_0",
+      title: "商品ID",
+      dataIndex: "id",
+      sorter: 'return props.leftValue - props.rightValue',
+      sortDirections: ['ascend', 'descend'],
+      component: "text",
+      options: {
+        mode: "single",
+        maxRow: 1,
+      },
+    },
+    {
+      key: "mock_1",
+      title: "商品名称",
+      dataIndex: "name",
+      sorter: 'return props.leftValue == props.rightValue ? 0 : props.leftValue > props.rightValue ? 1 : -1',
+      sortDirections: ['ascend'],
+      component: "text",
+      options: {
+        mode: "single",
+        maxRow: 1,
+      },
+    },
+    {
+      key: "mock_2",
+      title: "商品详情",
+      align: "center",
+      dataIndex: "description",
+      component: "text",
+      options: {
+        mode: "single",
+        ellipsis: true,
+        maxRow: 1,
+      },
+    },
+  ],
+};
+
+const dataSource = [
+  {
+    id: 1,
+    name: "商品一",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+  {
+    id: 3,
+    name: "商品三",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+  {
+    id: 2,
+    name: "商品二",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+];
+
+const Demo = () => {
+  const [ds, setDS] = React.useState(dataSource);
+  const ref = React.useRef(null);
+
+  const onClick = React.useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!ref.current.sorter.key) {
+      ref.current.setSorter({ key: 'mock_0', direction: 'ascend' });
+    } else if (ref.current.sorter.direction === 'ascend') {
+      ref.current.setSorter({ key: 'mock_0', direction: 'descend' });
+    } else {
+      ref.current.setSorter(null);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <DripTable
+        ref={ref}
+        schema={schema}
+        dataSource={ds}
+        onSorterChange={(sorter) => {
+          if (sorter.comparer) {
+            setDS([...dataSource].sort(sorter.comparer));
+          } else {
+            setDS(dataSource);
+          }
+        }}
+      />
+      <div style={ { display: 'flex', justifyContent: 'center', margin: '10px 0' } }>
+        <Button type="primary" onClick={onClick}>设置排序状态</Button>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```
diff --git a/docs/drip-table/api/sorter.md b/docs/drip-table/api/sorter.md
@@ -0,0 +1,123 @@
+---
+title: 排序器 sorter
+toc: content
+---
+
+## 表格排序器 sorter
+
+- 描述：表格排序器，获取当前表格排序器数据
+- 类型：`IDripTableContext<RecordType, ExtraOptions>['state']['sorter']`
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ * hideActions: ["CSB"]
+ */
+import { message, Button } from "antd";
+import React from "react";
+import DripTable from "drip-table";
+
+const schema = {
+  columns: [
+    {
+      key: "mock_0",
+      title: "商品ID",
+      dataIndex: "id",
+      sorter: 'return props.leftValue > props.rightValue',
+      sortDirections: ['ascend', 'descend'],
+      component: "text",
+      options: {
+        mode: "single",
+        maxRow: 1,
+      },
+    },
+    {
+      key: "mock_1",
+      title: "商品名称",
+      dataIndex: "name",
+      sorter: 'return props.leftValue > props.rightValue',
+      sortDirections: ['ascend'],
+      component: "text",
+      options: {
+        mode: "single",
+        maxRow: 1,
+      },
+    },
+    {
+      key: "mock_2",
+      title: "商品详情",
+      align: "center",
+      dataIndex: "description",
+      component: "text",
+      options: {
+        mode: "single",
+        ellipsis: true,
+        maxRow: 1,
+      },
+    },
+  ],
+};
+
+const dataSource = [
+  {
+    id: 1,
+    name: "商品一",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+  {
+    id: 3,
+    name: "商品三",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+  {
+    id: 2,
+    name: "商品二",
+    price: 7999,
+    status: "onSale",
+    description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+  },
+];
+
+const Demo = () => {
+  const [ds, setDS] = React.useState(dataSource);
+  const ref = React.useRef(null);
+
+  const onClick = React.useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!ref.current.sorter.key) {
+      message.info(`当前排序为 默认排序`);
+    } else {
+      message.info(`当前排序为 ${ref.current.sorter.key} 列 ${ref.current.sorter.direction === 'ascend' ? '升序' : '降序'}`);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <DripTable
+        ref={ref}
+        schema={schema}
+        dataSource={ds}
+        onSorterChange={(sorter) => {
+          if (sorter.comparer) {
+            setDS([...dataSource].sort(sorter.comparer));
+          } else {
+            setDS(dataSource);
+          }
+        }}
+      />
+      <div style={ { display: 'flex', justifyContent: 'center', margin: '10px 0' } }>
+        <Button type="primary" onClick={onClick}>获取排序状态</Button>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```
diff --git a/docs/drip-table/schema/index.md b/docs/drip-table/schema/index.md
@@ -40,6 +40,7 @@ toc: content
 | [rowFooter](/drip-table/schema/row-footer) | 行尾部插槽 | × | [🔗 示例](/drip-table/schema/row-footer) |
 | [span](/drip-table/schema/span) | 行列合并设置 | × | [🔗 示例](/drip-table/schema/span) |
 | [emptyText](/drip-table/schema/empty-text) | 表格无数据时提示语 | × | [🔗 示例](/drip-table/schema/empty-text) |
+| [initialSorter](/drip-table/schema/initial-sorter) | 表格默认排序 | × | [🔗 示例](/drip-table/schema/initial-sorter) |
 | [subtable](/drip-table/schema/subtable) | 子表设置项 | × | [🔗 示例](/drip-table/schema/subtable) |
 
 ### 示例

diff --git a/docs/drip-table/schema/initial-sorter.md b/docs/drip-table/schema/initial-sorter.md
@@ -0,0 +1,109 @@
+---
+title: 默认排序 initialSorter
+toc: content
+---
+
+## 默认排序 initialSorter
+
+- 描述：默认数据排序设置
+- 类型：
+
+```ts
+interface InitialSorter {
+  /**
+    * 排序键
+    */
+  key: string;
+  /**
+    * 排序方向
+    */
+  direction: 'ascend' | 'descend';
+}
+
+```
+
+- 默认值：`undefined`
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ * hideActions: ["CSB"]
+ */
+import { message } from "antd";
+import React from "react";
+import DripTable from "drip-table";
+
+const schema = {
+  columns: [
+    {
+      key: "mock_1",
+      title: "商品名称",
+      dataIndex: "name",
+      component: "text",
+      options: { mode: "single", maxRow: 1 },
+      sorter: 'return props.leftValue == props.rightValue ? 0 : props.leftValue > props.rightValue ? 1 : -1',
+    },
+    {
+      key: "mock_2",
+      title: "商品详情",
+      align: "center",
+      dataIndex: "description",
+      component: "text",
+      options: { mode: "single", ellipsis: true, maxRow: 1 },
+      sorter: 'return props.leftRecord.description == props.rightRecord.description ? 0 : props.leftRecord.description > props.rightRecord.description ? 1 : -1',
+    },
+    {
+      key: 'mock_3',
+      title: '库存状态',
+      width: 150,
+      align: 'center',
+      dataIndex: 'status',
+      description: '这是一条提示信息',
+      component: 'text',
+      options: {
+        mode: 'single',
+        i18n: {
+          onSale: '售卖中',
+          soldOut: '已售罄',
+        },
+      },
+      sorter: 'return props.leftValue == props.rightValue ? 0 : props.leftValue > props.rightValue ? 1 : -1',
+      sortDirections: ['ascend'],
+    },
+  ],
+  initialSorter: {
+    key: 'mock_1',
+    direction: 'descend',
+  },
+};
+
+const dataSource = Array(100).fill(0).map((_, i) => ({
+  id: i + 1,
+  name: `商品${i + 1}`,
+  price: 7999,
+  status: Math.random() > 0.5 ? "onSale" : "soldOut",
+  description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+}));
+
+const Demo = () => {
+  const [ds, setDS] = React.useState(dataSource);
+  return (
+    <DripTable
+      schema={schema}
+      dataSource={ds}
+      onChange={({ sorter }) => {
+        if (sorter.comparer) {
+          setDS([...dataSource].sort(sorter.comparer))
+        } else {
+          setDS(dataSource)
+        }
+        message.info(`排序：${JSON.stringify(sorter)}。`);
+        console.log('onChange', sorter);
+      }}
+    />
+  );
+};
+
+export default Demo;
+```