@pisell/materials 6.11.9 → 6.11.11

package/es/components/pisellRecordBoard/PisellRecordBoard.stories.js

@@ -745,18 +745,17 @@ export var GridWithMultiplePages = {
 };
 
 /**
- * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
  */
-export var GridWithOnRow = {
+export var GridLayoutWithCollapseUniformColumns = {
   parameters: {
     docs: {
       description: {
-        story: 'grid 支持 antd Table 透传。此处演示 onRow.onClick（行点击）与 rowClassName（按订单状态高亮行）。类型为 RecordBoardGridProps，基于 TableProps 省略 dataSource/loading/pagination/columns/scroll/size/rowSelection。'
+        story: 'grid.collapseUniformColumns: true 时，当前页某列全部同值或全部为空则隐藏该列，在表格上方显示总结区。本示例数据当前页「支付状态」均为已支付、「备注」均为空，故两列折叠并出现在总结区。'
       }
     }
   },
-  render: function GridWithOnRowRender() {
-    var _searchParams$filter2;
+  render: function GridLayoutWithCollapseUniformColumnsRender() {
     var _useState23 = useState(1),
       _useState24 = _slicedToArray(_useState23, 2),
       pageNumber = _useState24[0],
@@ -765,18 +764,252 @@ export var GridWithOnRow = {
       _useState26 = _slicedToArray(_useState25, 2),
       pageSize = _useState26[0],
       setPageSize = _useState26[1];
-    var _useState27 = useState({}),
+    var _useState27 = useState([]),
       _useState28 = _slicedToArray(_useState27, 2),
-      searchParams = _useState28[0],
-      setSearchParams = _useState28[1];
+      selectedKeys = _useState28[0],
+      setSelectedKeys = _useState28[1];
     var _useState29 = useState([]),
       _useState30 = _slicedToArray(_useState29, 2),
-      selectedKeys = _useState30[0],
-      setSelectedKeys = _useState30[1];
-    var _useState31 = useState([]),
+      selectedRows = _useState30[0],
+      setSelectedRows = _useState30[1];
+
+    // 当前页数据：支付状态全部为 paid，备注全部为空，用于演示同值列折叠
+    var uniformData = useMemo(function () {
+      return Array.from({
+        length: 8
+      }, function (_, i) {
+        return {
+          id: "u-".concat(i + 1),
+          orderNo: "U".concat(String(10001 + i).padStart(6, '0')),
+          payStatus: 'paid',
+          amount: 100 + i * 10,
+          note: ''
+        };
+      });
+    }, []);
+    var total = uniformData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return uniformData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformData]);
+    var columnsUniform = [{
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      width: 140
+    }, {
+      title: '支付状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      width: 120
+    }, {
+      title: '订单金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      width: 120
+    }, {
+      title: '备注',
+      dataIndex: 'note',
+      key: 'note',
+      width: 160
+    }];
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: function onSearch() {},
+        onReset: function onReset() {},
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsUniform,
+        scroll: {
+          x: 600
+        },
+        collapseUniformColumns: true,
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+ */
+export var GridLayoutWithUniformCompare = {
+  parameters: {
+    docs: {
+      description: {
+        story: '列「支付分类」的 dataIndex 取值为对象 { id, name }。通过 uniformCompare(value, record) 返回 String(value.id) 参与比较，当前页全部为同一 id 时该列折叠，总结区优先用列 render 展示（如「已支付」）。'
+      }
+    }
+  },
+  render: function GridLayoutWithUniformCompareRender() {
+    var _useState31 = useState(1),
       _useState32 = _slicedToArray(_useState31, 2),
-      selectedRows = _useState32[0],
-      setSelectedRows = _useState32[1];
+      pageNumber = _useState32[0],
+      setPageNumber = _useState32[1];
+    var _useState33 = useState(10),
+      _useState34 = _slicedToArray(_useState33, 2),
+      pageSize = _useState34[0],
+      setPageSize = _useState34[1];
+    var _useState35 = useState([]),
+      _useState36 = _slicedToArray(_useState35, 2),
+      selectedKeys = _useState36[0],
+      setSelectedKeys = _useState36[1];
+    var _useState37 = useState([]),
+      _useState38 = _slicedToArray(_useState37, 2),
+      selectedRows = _useState38[0],
+      setSelectedRows = _useState38[1];
+
+    // 支付分类为对象，当前页全部为 { id: 1, name: '已支付' }，用 uniformCompare 按 id 比较
+    var uniformCompareData = useMemo(function () {
+      return Array.from({
+        length: 6
+      }, function (_, i) {
+        return {
+          id: "uc-".concat(i + 1),
+          orderNo: "UC".concat(String(20001 + i).padStart(6, '0')),
+          payCategory: {
+            id: 1,
+            name: '已支付'
+          },
+          amount: 50 + i * 5
+        };
+      });
+    }, []);
+    var total = uniformCompareData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return uniformCompareData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformCompareData]);
+    var columnsWithUniformCompare = [{
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      width: 140
+    }, {
+      title: '支付分类',
+      dataIndex: 'payCategory',
+      key: 'payCategory',
+      width: 120,
+      uniformCompare: function uniformCompare(value) {
+        return value != null && _typeof(value) === 'object' && 'id' in value && value.id != null ? String(value.id) : undefined;
+      },
+      render: function render(value) {
+        return (value === null || value === void 0 ? void 0 : value.name) != null ? value.name : '-';
+      }
+    }, {
+      title: '订单金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      width: 120
+    }];
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: function onSearch() {},
+        onReset: function onReset() {},
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithUniformCompare,
+        scroll: {
+          x: 450
+        },
+        collapseUniformColumns: true,
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ */
+export var GridWithOnRow = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'grid 支持 antd Table 透传。此处演示 onRow.onClick（行点击）与 rowClassName（按订单状态高亮行）。类型为 RecordBoardGridProps，基于 TableProps 省略 dataSource/loading/pagination/columns/scroll/size/rowSelection。'
+      }
+    }
+  },
+  render: function GridWithOnRowRender() {
+    var _searchParams$filter2;
+    var _useState39 = useState(1),
+      _useState40 = _slicedToArray(_useState39, 2),
+      pageNumber = _useState40[0],
+      setPageNumber = _useState40[1];
+    var _useState41 = useState(10),
+      _useState42 = _slicedToArray(_useState41, 2),
+      pageSize = _useState42[0],
+      setPageSize = _useState42[1];
+    var _useState43 = useState({}),
+      _useState44 = _slicedToArray(_useState43, 2),
+      searchParams = _useState44[0],
+      setSearchParams = _useState44[1];
+    var _useState45 = useState([]),
+      _useState46 = _slicedToArray(_useState45, 2),
+      selectedKeys = _useState46[0],
+      setSelectedKeys = _useState46[1];
+    var _useState47 = useState([]),
+      _useState48 = _slicedToArray(_useState47, 2),
+      selectedRows = _useState48[0],
+      setSelectedRows = _useState48[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter2 = searchParams.filter) === null || _searchParams$filter2 === void 0 ? void 0 : _searchParams$filter2.values;
     var filteredList = useMemo(function () {
       return filterDataByCriteria(mockData, filterValues);
@@ -870,30 +1103,30 @@ export var GridLayoutWithColumnType = {
   },
   render: function GridLayoutWithColumnTypeRender() {
     var _searchParams$filter3;
-    var _useState33 = useState(1),
-      _useState34 = _slicedToArray(_useState33, 2),
-      pageNumber = _useState34[0],
-      setPageNumber = _useState34[1];
-    var _useState35 = useState(10),
-      _useState36 = _slicedToArray(_useState35, 2),
-      pageSize = _useState36[0],
-      setPageSize = _useState36[1];
-    var _useState37 = useState(false),
-      _useState38 = _slicedToArray(_useState37, 2),
-      loading = _useState38[0],
-      setLoading = _useState38[1];
-    var _useState39 = useState({}),
-      _useState40 = _slicedToArray(_useState39, 2),
-      searchParams = _useState40[0],
-      setSearchParams = _useState40[1];
-    var _useState41 = useState([]),
-      _useState42 = _slicedToArray(_useState41, 2),
-      selectedKeys = _useState42[0],
-      setSelectedKeys = _useState42[1];
-    var _useState43 = useState([]),
-      _useState44 = _slicedToArray(_useState43, 2),
-      selectedRows = _useState44[0],
-      setSelectedRows = _useState44[1];
+    var _useState49 = useState(1),
+      _useState50 = _slicedToArray(_useState49, 2),
+      pageNumber = _useState50[0],
+      setPageNumber = _useState50[1];
+    var _useState51 = useState(10),
+      _useState52 = _slicedToArray(_useState51, 2),
+      pageSize = _useState52[0],
+      setPageSize = _useState52[1];
+    var _useState53 = useState(false),
+      _useState54 = _slicedToArray(_useState53, 2),
+      loading = _useState54[0],
+      setLoading = _useState54[1];
+    var _useState55 = useState({}),
+      _useState56 = _slicedToArray(_useState55, 2),
+      searchParams = _useState56[0],
+      setSearchParams = _useState56[1];
+    var _useState57 = useState([]),
+      _useState58 = _slicedToArray(_useState57, 2),
+      selectedKeys = _useState58[0],
+      setSelectedKeys = _useState58[1];
+    var _useState59 = useState([]),
+      _useState60 = _slicedToArray(_useState59, 2),
+      selectedRows = _useState60[0],
+      setSelectedRows = _useState60[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter3 = searchParams.filter) === null || _searchParams$filter3 === void 0 ? void 0 : _searchParams$filter3.values;
     var filteredList = useMemo(function () {
       return filterDataByCriteria(mockData, filterValues);
@@ -977,26 +1210,26 @@ export var GridLayoutToolBarSortAndFilter = {
   },
   render: function GridLayoutToolBarSortAndFilterRender() {
     var _searchParams$filter4;
-    var _useState45 = useState(1),
-      _useState46 = _slicedToArray(_useState45, 2),
-      pageNumber = _useState46[0],
-      setPageNumber = _useState46[1];
-    var _useState47 = useState(10),
-      _useState48 = _slicedToArray(_useState47, 2),
-      pageSize = _useState48[0],
-      setPageSize = _useState48[1];
-    var _useState49 = useState({}),
-      _useState50 = _slicedToArray(_useState49, 2),
-      searchParams = _useState50[0],
-      setSearchParams = _useState50[1];
-    var _useState51 = useState([]),
-      _useState52 = _slicedToArray(_useState51, 2),
-      selectedKeys = _useState52[0],
-      setSelectedKeys = _useState52[1];
-    var _useState53 = useState([]),
-      _useState54 = _slicedToArray(_useState53, 2),
-      selectedRows = _useState54[0],
-      setSelectedRows = _useState54[1];
+    var _useState61 = useState(1),
+      _useState62 = _slicedToArray(_useState61, 2),
+      pageNumber = _useState62[0],
+      setPageNumber = _useState62[1];
+    var _useState63 = useState(10),
+      _useState64 = _slicedToArray(_useState63, 2),
+      pageSize = _useState64[0],
+      setPageSize = _useState64[1];
+    var _useState65 = useState({}),
+      _useState66 = _slicedToArray(_useState65, 2),
+      searchParams = _useState66[0],
+      setSearchParams = _useState66[1];
+    var _useState67 = useState([]),
+      _useState68 = _slicedToArray(_useState67, 2),
+      selectedKeys = _useState68[0],
+      setSelectedKeys = _useState68[1];
+    var _useState69 = useState([]),
+      _useState70 = _slicedToArray(_useState69, 2),
+      selectedRows = _useState70[0],
+      setSelectedRows = _useState70[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter4 = searchParams.filter) === null || _searchParams$filter4 === void 0 ? void 0 : _searchParams$filter4.values;
     var filteredList = useMemo(function () {
       return filterDataByCriteria(mockData, filterValues);
@@ -1194,30 +1427,30 @@ export var GridLayoutWithQuickFilterOnLeft = {
   },
   render: function GridLayoutWithQuickFilterOnLeftRender() {
     var _searchParams$filter5;
-    var _useState55 = useState(1),
-      _useState56 = _slicedToArray(_useState55, 2),
-      pageNumber = _useState56[0],
-      setPageNumber = _useState56[1];
-    var _useState57 = useState(10),
-      _useState58 = _slicedToArray(_useState57, 2),
-      pageSize = _useState58[0],
-      setPageSize = _useState58[1];
-    var _useState59 = useState(false),
-      _useState60 = _slicedToArray(_useState59, 2),
-      loading = _useState60[0],
-      setLoading = _useState60[1];
-    var _useState61 = useState({}),
-      _useState62 = _slicedToArray(_useState61, 2),
-      searchParams = _useState62[0],
-      setSearchParams = _useState62[1];
-    var _useState63 = useState([]),
-      _useState64 = _slicedToArray(_useState63, 2),
-      selectedKeys = _useState64[0],
-      setSelectedKeys = _useState64[1];
-    var _useState65 = useState([]),
-      _useState66 = _slicedToArray(_useState65, 2),
-      selectedRows = _useState66[0],
-      setSelectedRows = _useState66[1];
+    var _useState71 = useState(1),
+      _useState72 = _slicedToArray(_useState71, 2),
+      pageNumber = _useState72[0],
+      setPageNumber = _useState72[1];
+    var _useState73 = useState(10),
+      _useState74 = _slicedToArray(_useState73, 2),
+      pageSize = _useState74[0],
+      setPageSize = _useState74[1];
+    var _useState75 = useState(false),
+      _useState76 = _slicedToArray(_useState75, 2),
+      loading = _useState76[0],
+      setLoading = _useState76[1];
+    var _useState77 = useState({}),
+      _useState78 = _slicedToArray(_useState77, 2),
+      searchParams = _useState78[0],
+      setSearchParams = _useState78[1];
+    var _useState79 = useState([]),
+      _useState80 = _slicedToArray(_useState79, 2),
+      selectedKeys = _useState80[0],
+      setSelectedKeys = _useState80[1];
+    var _useState81 = useState([]),
+      _useState82 = _slicedToArray(_useState81, 2),
+      selectedRows = _useState82[0],
+      setSelectedRows = _useState82[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter5 = searchParams.filter) === null || _searchParams$filter5 === void 0 ? void 0 : _searchParams$filter5.values;
     var filteredList = useMemo(function () {
       return filterDataByCriteria(mockData, filterValues);
@@ -1301,26 +1534,26 @@ export var CustomQuickFilterAndColumnsRender = {
   },
   render: function CustomQuickFilterAndColumnsRenderFn() {
     var _searchParams$filter6;
-    var _useState67 = useState(1),
-      _useState68 = _slicedToArray(_useState67, 2),
-      pageNumber = _useState68[0],
-      setPageNumber = _useState68[1];
-    var _useState69 = useState(10),
-      _useState70 = _slicedToArray(_useState69, 2),
-      pageSize = _useState70[0],
-      setPageSize = _useState70[1];
-    var _useState71 = useState({}),
-      _useState72 = _slicedToArray(_useState71, 2),
-      searchParams = _useState72[0],
-      setSearchParams = _useState72[1];
-    var _useState73 = useState([]),
-      _useState74 = _slicedToArray(_useState73, 2),
-      selectedKeys = _useState74[0],
-      setSelectedKeys = _useState74[1];
-    var _useState75 = useState([]),
-      _useState76 = _slicedToArray(_useState75, 2),
-      selectedRows = _useState76[0],
-      setSelectedRows = _useState76[1];
+    var _useState83 = useState(1),
+      _useState84 = _slicedToArray(_useState83, 2),
+      pageNumber = _useState84[0],
+      setPageNumber = _useState84[1];
+    var _useState85 = useState(10),
+      _useState86 = _slicedToArray(_useState85, 2),
+      pageSize = _useState86[0],
+      setPageSize = _useState86[1];
+    var _useState87 = useState({}),
+      _useState88 = _slicedToArray(_useState87, 2),
+      searchParams = _useState88[0],
+      setSearchParams = _useState88[1];
+    var _useState89 = useState([]),
+      _useState90 = _slicedToArray(_useState89, 2),
+      selectedKeys = _useState90[0],
+      setSelectedKeys = _useState90[1];
+    var _useState91 = useState([]),
+      _useState92 = _slicedToArray(_useState91, 2),
+      selectedRows = _useState92[0],
+      setSelectedRows = _useState92[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter6 = searchParams.filter) === null || _searchParams$filter6 === void 0 ? void 0 : _searchParams$filter6.values;
     var filteredList = useMemo(function () {
       var byCriteria = filterDataByCriteria(mockData, filterValues);
@@ -1444,26 +1677,26 @@ export var CustomFilterSortRender = {
   },
   render: function CustomFilterSortRenderFn() {
     var _searchParams$filter7;
-    var _useState77 = useState(1),
-      _useState78 = _slicedToArray(_useState77, 2),
-      pageNumber = _useState78[0],
-      setPageNumber = _useState78[1];
-    var _useState79 = useState(10),
-      _useState80 = _slicedToArray(_useState79, 2),
-      pageSize = _useState80[0],
-      setPageSize = _useState80[1];
-    var _useState81 = useState({}),
-      _useState82 = _slicedToArray(_useState81, 2),
-      searchParams = _useState82[0],
-      setSearchParams = _useState82[1];
-    var _useState83 = useState([]),
-      _useState84 = _slicedToArray(_useState83, 2),
-      selectedKeys = _useState84[0],
-      setSelectedKeys = _useState84[1];
-    var _useState85 = useState([]),
-      _useState86 = _slicedToArray(_useState85, 2),
-      selectedRows = _useState86[0],
-      setSelectedRows = _useState86[1];
+    var _useState93 = useState(1),
+      _useState94 = _slicedToArray(_useState93, 2),
+      pageNumber = _useState94[0],
+      setPageNumber = _useState94[1];
+    var _useState95 = useState(10),
+      _useState96 = _slicedToArray(_useState95, 2),
+      pageSize = _useState96[0],
+      setPageSize = _useState96[1];
+    var _useState97 = useState({}),
+      _useState98 = _slicedToArray(_useState97, 2),
+      searchParams = _useState98[0],
+      setSearchParams = _useState98[1];
+    var _useState99 = useState([]),
+      _useState100 = _slicedToArray(_useState99, 2),
+      selectedKeys = _useState100[0],
+      setSelectedKeys = _useState100[1];
+    var _useState101 = useState([]),
+      _useState102 = _slicedToArray(_useState101, 2),
+      selectedRows = _useState102[0],
+      setSelectedRows = _useState102[1];
     var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter7 = searchParams.filter) === null || _searchParams$filter7 === void 0 ? void 0 : _searchParams$filter7.values;
     var filteredList = useMemo(function () {
       return filterDataByCriteria(mockData, filterValues);
@@ -1539,30 +1772,30 @@ export var CustomFilterSortRender = {
  */
 export var GridLayoutWithPisellFindInToolBar = {
   render: function GridLayoutWithPisellFindInToolBarRender() {
-    var _useState87 = useState(1),
-      _useState88 = _slicedToArray(_useState87, 2),
-      pageNumber = _useState88[0],
-      setPageNumber = _useState88[1];
-    var _useState89 = useState(10),
-      _useState90 = _slicedToArray(_useState89, 2),
-      pageSize = _useState90[0],
-      setPageSize = _useState90[1];
-    var _useState91 = useState(false),
-      _useState92 = _slicedToArray(_useState91, 2),
-      loading = _useState92[0],
-      setLoading = _useState92[1];
-    var _useState93 = useState({}),
-      _useState94 = _slicedToArray(_useState93, 2),
-      searchParams = _useState94[0],
-      setSearchParams = _useState94[1];
-    var _useState95 = useState([]),
-      _useState96 = _slicedToArray(_useState95, 2),
-      selectedKeys = _useState96[0],
-      setSelectedKeys = _useState96[1];
-    var _useState97 = useState([]),
-      _useState98 = _slicedToArray(_useState97, 2),
-      selectedRows = _useState98[0],
-      setSelectedRows = _useState98[1];
+    var _useState103 = useState(1),
+      _useState104 = _slicedToArray(_useState103, 2),
+      pageNumber = _useState104[0],
+      setPageNumber = _useState104[1];
+    var _useState105 = useState(10),
+      _useState106 = _slicedToArray(_useState105, 2),
+      pageSize = _useState106[0],
+      setPageSize = _useState106[1];
+    var _useState107 = useState(false),
+      _useState108 = _slicedToArray(_useState107, 2),
+      loading = _useState108[0],
+      setLoading = _useState108[1];
+    var _useState109 = useState({}),
+      _useState110 = _slicedToArray(_useState109, 2),
+      searchParams = _useState110[0],
+      setSearchParams = _useState110[1];
+    var _useState111 = useState([]),
+      _useState112 = _slicedToArray(_useState111, 2),
+      selectedKeys = _useState112[0],
+      setSelectedKeys = _useState112[1];
+    var _useState113 = useState([]),
+      _useState114 = _slicedToArray(_useState113, 2),
+      selectedRows = _useState114[0],
+      setSelectedRows = _useState114[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;
@@ -1632,26 +1865,26 @@ export var GridLayoutWithPisellFindInToolBar = {
  */
 export var GridLayoutToolBarSearchInput = {
   render: function GridLayoutToolBarSearchInputRender() {
-    var _useState99 = useState(1),
-      _useState100 = _slicedToArray(_useState99, 2),
-      pageNumber = _useState100[0],
-      setPageNumber = _useState100[1];
-    var _useState101 = useState(10),
-      _useState102 = _slicedToArray(_useState101, 2),
-      pageSize = _useState102[0],
-      setPageSize = _useState102[1];
-    var _useState103 = useState({}),
-      _useState104 = _slicedToArray(_useState103, 2),
-      searchParams = _useState104[0],
-      setSearchParams = _useState104[1];
-    var _useState105 = useState([]),
-      _useState106 = _slicedToArray(_useState105, 2),
-      selectedKeys = _useState106[0],
-      setSelectedKeys = _useState106[1];
-    var _useState107 = useState([]),
-      _useState108 = _slicedToArray(_useState107, 2),
-      selectedRows = _useState108[0],
-      setSelectedRows = _useState108[1];
+    var _useState115 = useState(1),
+      _useState116 = _slicedToArray(_useState115, 2),
+      pageNumber = _useState116[0],
+      setPageNumber = _useState116[1];
+    var _useState117 = useState(10),
+      _useState118 = _slicedToArray(_useState117, 2),
+      pageSize = _useState118[0],
+      setPageSize = _useState118[1];
+    var _useState119 = useState({}),
+      _useState120 = _slicedToArray(_useState119, 2),
+      searchParams = _useState120[0],
+      setSearchParams = _useState120[1];
+    var _useState121 = useState([]),
+      _useState122 = _slicedToArray(_useState121, 2),
+      selectedKeys = _useState122[0],
+      setSelectedKeys = _useState122[1];
+    var _useState123 = useState([]),
+      _useState124 = _slicedToArray(_useState123, 2),
+      selectedRows = _useState124[0],
+      setSelectedRows = _useState124[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;
@@ -1724,30 +1957,30 @@ export var GridLayoutFull = {
     }
   },
   render: function GridLayoutFullRender() {
-    var _useState109 = useState(1),
-      _useState110 = _slicedToArray(_useState109, 2),
-      pageNumber = _useState110[0],
-      setPageNumber = _useState110[1];
-    var _useState111 = useState(10),
-      _useState112 = _slicedToArray(_useState111, 2),
-      pageSize = _useState112[0],
-      setPageSize = _useState112[1];
-    var _useState113 = useState(false),
-      _useState114 = _slicedToArray(_useState113, 2),
-      loading = _useState114[0],
-      setLoading = _useState114[1];
-    var _useState115 = useState({}),
-      _useState116 = _slicedToArray(_useState115, 2),
-      searchParams = _useState116[0],
-      setSearchParams = _useState116[1];
-    var _useState117 = useState([]),
-      _useState118 = _slicedToArray(_useState117, 2),
-      selectedKeys = _useState118[0],
-      setSelectedKeys = _useState118[1];
-    var _useState119 = useState([]),
-      _useState120 = _slicedToArray(_useState119, 2),
-      selectedRows = _useState120[0],
-      setSelectedRows = _useState120[1];
+    var _useState125 = useState(1),
+      _useState126 = _slicedToArray(_useState125, 2),
+      pageNumber = _useState126[0],
+      setPageNumber = _useState126[1];
+    var _useState127 = useState(10),
+      _useState128 = _slicedToArray(_useState127, 2),
+      pageSize = _useState128[0],
+      setPageSize = _useState128[1];
+    var _useState129 = useState(false),
+      _useState130 = _slicedToArray(_useState129, 2),
+      loading = _useState130[0],
+      setLoading = _useState130[1];
+    var _useState131 = useState({}),
+      _useState132 = _slicedToArray(_useState131, 2),
+      searchParams = _useState132[0],
+      setSearchParams = _useState132[1];
+    var _useState133 = useState([]),
+      _useState134 = _slicedToArray(_useState133, 2),
+      selectedKeys = _useState134[0],
+      setSelectedKeys = _useState134[1];
+    var _useState135 = useState([]),
+      _useState136 = _slicedToArray(_useState135, 2),
+      selectedRows = _useState136[0],
+      setSelectedRows = _useState136[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;
@@ -1878,26 +2111,26 @@ export var CustomComposition = {
     }
   },
   render: function CustomCompositionRender() {
-    var _useState121 = useState(1),
-      _useState122 = _slicedToArray(_useState121, 2),
-      pageNumber = _useState122[0],
-      setPageNumber = _useState122[1];
-    var _useState123 = useState(10),
-      _useState124 = _slicedToArray(_useState123, 2),
-      pageSize = _useState124[0],
-      setPageSize = _useState124[1];
-    var _useState125 = useState({}),
-      _useState126 = _slicedToArray(_useState125, 2),
-      searchParams = _useState126[0],
-      setSearchParams = _useState126[1];
-    var _useState127 = useState([]),
-      _useState128 = _slicedToArray(_useState127, 2),
-      selectedKeys = _useState128[0],
-      setSelectedKeys = _useState128[1];
-    var _useState129 = useState([]),
-      _useState130 = _slicedToArray(_useState129, 2),
-      selectedRows = _useState130[0],
-      setSelectedRows = _useState130[1];
+    var _useState137 = useState(1),
+      _useState138 = _slicedToArray(_useState137, 2),
+      pageNumber = _useState138[0],
+      setPageNumber = _useState138[1];
+    var _useState139 = useState(10),
+      _useState140 = _slicedToArray(_useState139, 2),
+      pageSize = _useState140[0],
+      setPageSize = _useState140[1];
+    var _useState141 = useState({}),
+      _useState142 = _slicedToArray(_useState141, 2),
+      searchParams = _useState142[0],
+      setSearchParams = _useState142[1];
+    var _useState143 = useState([]),
+      _useState144 = _slicedToArray(_useState143, 2),
+      selectedKeys = _useState144[0],
+      setSelectedKeys = _useState144[1];
+    var _useState145 = useState([]),
+      _useState146 = _slicedToArray(_useState145, 2),
+      selectedRows = _useState146[0],
+      setSelectedRows = _useState146[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;
@@ -1960,26 +2193,26 @@ export var CustomComposition = {
  */
 export var WithPisellFindSearch = {
   render: function WithPisellFindSearchRender() {
-    var _useState131 = useState(1),
-      _useState132 = _slicedToArray(_useState131, 2),
-      pageNumber = _useState132[0],
-      setPageNumber = _useState132[1];
-    var _useState133 = useState(10),
-      _useState134 = _slicedToArray(_useState133, 2),
-      pageSize = _useState134[0],
-      setPageSize = _useState134[1];
-    var _useState135 = useState({}),
-      _useState136 = _slicedToArray(_useState135, 2),
-      searchParams = _useState136[0],
-      setSearchParams = _useState136[1];
-    var _useState137 = useState([]),
-      _useState138 = _slicedToArray(_useState137, 2),
-      selectedKeys = _useState138[0],
-      setSelectedKeys = _useState138[1];
-    var _useState139 = useState([]),
-      _useState140 = _slicedToArray(_useState139, 2),
-      selectedRows = _useState140[0],
-      setSelectedRows = _useState140[1];
+    var _useState147 = useState(1),
+      _useState148 = _slicedToArray(_useState147, 2),
+      pageNumber = _useState148[0],
+      setPageNumber = _useState148[1];
+    var _useState149 = useState(10),
+      _useState150 = _slicedToArray(_useState149, 2),
+      pageSize = _useState150[0],
+      setPageSize = _useState150[1];
+    var _useState151 = useState({}),
+      _useState152 = _slicedToArray(_useState151, 2),
+      searchParams = _useState152[0],
+      setSearchParams = _useState152[1];
+    var _useState153 = useState([]),
+      _useState154 = _slicedToArray(_useState153, 2),
+      selectedKeys = _useState154[0],
+      setSelectedKeys = _useState154[1];
+    var _useState155 = useState([]),
+      _useState156 = _slicedToArray(_useState155, 2),
+      selectedRows = _useState156[0],
+      setSelectedRows = _useState156[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;
@@ -2050,26 +2283,26 @@ export var WithPisellFindSearch = {
  */
 export var SearchAndGridOnly = {
   render: function SearchAndGridOnlyRender() {
-    var _useState141 = useState(1),
-      _useState142 = _slicedToArray(_useState141, 2),
-      pageNumber = _useState142[0],
-      setPageNumber = _useState142[1];
-    var _useState143 = useState(10),
-      _useState144 = _slicedToArray(_useState143, 2),
-      pageSize = _useState144[0],
-      setPageSize = _useState144[1];
-    var _useState145 = useState({}),
-      _useState146 = _slicedToArray(_useState145, 2),
-      searchParams = _useState146[0],
-      setSearchParams = _useState146[1];
-    var _useState147 = useState([]),
-      _useState148 = _slicedToArray(_useState147, 2),
-      selectedKeys = _useState148[0],
-      setSelectedKeys = _useState148[1];
-    var _useState149 = useState([]),
-      _useState150 = _slicedToArray(_useState149, 2),
-      selectedRows = _useState150[0],
-      setSelectedRows = _useState150[1];
+    var _useState157 = useState(1),
+      _useState158 = _slicedToArray(_useState157, 2),
+      pageNumber = _useState158[0],
+      setPageNumber = _useState158[1];
+    var _useState159 = useState(10),
+      _useState160 = _slicedToArray(_useState159, 2),
+      pageSize = _useState160[0],
+      setPageSize = _useState160[1];
+    var _useState161 = useState({}),
+      _useState162 = _slicedToArray(_useState161, 2),
+      searchParams = _useState162[0],
+      setSearchParams = _useState162[1];
+    var _useState163 = useState([]),
+      _useState164 = _slicedToArray(_useState163, 2),
+      selectedKeys = _useState164[0],
+      setSelectedKeys = _useState164[1];
+    var _useState165 = useState([]),
+      _useState166 = _slicedToArray(_useState165, 2),
+      selectedRows = _useState166[0],
+      setSelectedRows = _useState166[1];
     var total = mockData.length;
     var data = useMemo(function () {
       var start = (pageNumber - 1) * pageSize;