@canvas-components/react-list-table 0.3.7 → 0.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +34 -18
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +34 -18
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/index.d.cts CHANGED
@@ -36,8 +36,8 @@ interface ReactListTableToolbarOptions {
36
36
  /** 默认导出行为使用的文件名和汇总行配置。 */
37
37
  exportOptions?: ListTableExportXlsxOptions;
38
38
  onRefresh?: () => void;
39
- /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
40
- onDensityChange?: (density: 32 | 48 | 56) => void;
39
+ /** 表格密度变化回调，依次对应超紧凑、紧凑、中等和宽松。 */
40
+ onDensityChange?: (density: 26 | 32 | 48 | 56) => void;
41
41
  /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
42
42
  onExport?: () => void;
43
43
  /** 自定义全屏节点，默认使用表格根容器。 */
package/dist/index.d.ts CHANGED
@@ -36,8 +36,8 @@ interface ReactListTableToolbarOptions {
36
36
  /** 默认导出行为使用的文件名和汇总行配置。 */
37
37
  exportOptions?: ListTableExportXlsxOptions;
38
38
  onRefresh?: () => void;
39
- /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
40
- onDensityChange?: (density: 32 | 48 | 56) => void;
39
+ /** 表格密度变化回调，依次对应超紧凑、紧凑、中等和宽松。 */
40
+ onDensityChange?: (density: 26 | 32 | 48 | 56) => void;
41
41
  /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
42
42
  onExport?: () => void;
43
43
  /** 自定义全屏节点，默认使用表格根容器。 */
package/dist/index.js CHANGED
@@ -587,6 +587,14 @@ function DensityMenu(props) {
587
587
  onChange("compact");
588
588
  }
589
589
  },
590
+ {
591
+ key: "density-ultra-compact",
592
+ label: "\u8D85\u7D27\u51D1",
593
+ selected: value === "ultra-compact",
594
+ onClick: () => {
595
+ onChange("ultra-compact");
596
+ }
597
+ },
590
598
  {
591
599
  key: "density-auto",
592
600
  label: "\u81EA\u9002\u5E94",
@@ -665,7 +673,7 @@ function ZoomMenu(props) {
665
673
  alignItems: "center",
666
674
  gap: 8,
667
675
  color: "#6b7280",
668
- fontSize: 12
676
+ fontSize: 14
669
677
  },
670
678
  children: [
671
679
  /* @__PURE__ */ jsxs("span", { children: [
@@ -719,7 +727,7 @@ function ZoomMenu(props) {
719
727
  {
720
728
  style: {
721
729
  color: "#6b7280",
722
- fontSize: 12,
730
+ fontSize: 14,
723
731
  padding: "0 8px"
724
732
  },
725
733
  children: "\u8868\u683C\u7F29\u653E\uFF0850% - 200%\uFF09"
@@ -1068,7 +1076,7 @@ function CustomSelectionDialog(props) {
1068
1076
  },
1069
1077
  bodyStyle: { padding: "4px 20px 18px" },
1070
1078
  children: [
1071
- /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 10 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
1079
+ /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 14, marginBottom: 10 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
1072
1080
  /* @__PURE__ */ jsxs(
1073
1081
  "div",
1074
1082
  {
@@ -1078,7 +1086,7 @@ function CustomSelectionDialog(props) {
1078
1086
  gap: 8,
1079
1087
  marginBottom: 6,
1080
1088
  color: "#6b7280",
1081
- fontSize: 12,
1089
+ fontSize: 14,
1082
1090
  textAlign: "center"
1083
1091
  },
1084
1092
  children: [
@@ -1124,7 +1132,7 @@ function CustomSelectionRow(props) {
1124
1132
  marginBottom: 6
1125
1133
  },
1126
1134
  children: [
1127
- /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 12 }, children: props.label }),
1135
+ /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: props.label }),
1128
1136
  /* @__PURE__ */ jsx(
1129
1137
  ReactInputNumber,
1130
1138
  {
@@ -1212,7 +1220,7 @@ function SummaryMenu(props) {
1212
1220
  },
1213
1221
  children: [
1214
1222
  request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(Fragment, { children: [
1215
- /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
1223
+ /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
1216
1224
  /* @__PURE__ */ jsx(
1217
1225
  ReactInputNumber,
1218
1226
  {
@@ -1230,7 +1238,7 @@ function SummaryMenu(props) {
1230
1238
  )
1231
1239
  ] }) : null,
1232
1240
  request.onChangeSummaryRoundingMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
1233
- /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
1241
+ /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
1234
1242
  /* @__PURE__ */ jsx(
1235
1243
  ReactSelect,
1236
1244
  {
@@ -1250,7 +1258,7 @@ function SummaryMenu(props) {
1250
1258
  )
1251
1259
  ] }) : null,
1252
1260
  request.onChangeSummaryPreserveTrailingZeros ? /* @__PURE__ */ jsxs(Fragment, { children: [
1253
- /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
1261
+ /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
1254
1262
  /* @__PURE__ */ jsx(
1255
1263
  ReactSelect,
1256
1264
  {
@@ -1310,7 +1318,7 @@ function AlignmentMenu(props) {
1310
1318
  }
1311
1319
  function AlignmentGroup(props) {
1312
1320
  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
1313
- /* @__PURE__ */ jsx("strong", { style: { color: "#374151", fontSize: 13 }, children: props.label }),
1321
+ /* @__PURE__ */ jsx("strong", { style: { color: "#374151", fontSize: 14 }, children: props.label }),
1314
1322
  /* @__PURE__ */ jsx(
1315
1323
  AlignmentSegment,
1316
1324
  {
@@ -1350,7 +1358,7 @@ function AlignmentSegment(props) {
1350
1358
  alignItems: "center"
1351
1359
  },
1352
1360
  children: [
1353
- /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 12 }, children: props.label }),
1361
+ /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 14 }, children: props.label }),
1354
1362
  props.options.map((option) => /* @__PURE__ */ jsx(
1355
1363
  "button",
1356
1364
  {
@@ -2003,7 +2011,7 @@ function resolveMoreFormatSample(category, customPattern, decimalPlaces = 2, cur
2003
2011
  var moreFormatLabelStyle = {
2004
2012
  marginBottom: 6,
2005
2013
  color: "#4b5563",
2006
- fontSize: 12
2014
+ fontSize: 14
2007
2015
  };
2008
2016
  var moreFormatCategoryListStyle = {
2009
2017
  display: "grid",
@@ -2038,7 +2046,7 @@ var moreFormatExampleStyle = {
2038
2046
  };
2039
2047
  var moreFormatDescriptionStyle = {
2040
2048
  color: "#6b7280",
2041
- fontSize: 12
2049
+ fontSize: 14
2042
2050
  };
2043
2051
  var moreFormatOptionsStyle = {
2044
2052
  display: "flex",
@@ -2157,7 +2165,7 @@ var searchContentStyle = {
2157
2165
  var matchTextStyle = {
2158
2166
  minWidth: 58,
2159
2167
  color: "#64748b",
2160
- fontSize: 12,
2168
+ fontSize: 14,
2161
2169
  whiteSpace: "nowrap"
2162
2170
  };
2163
2171
  var toolButtonStyle = {
@@ -3124,7 +3132,7 @@ function ReactTableTooltipView(props) {
3124
3132
  return null;
3125
3133
  }
3126
3134
  const zoom = typeof request.contentZoom === "number" && Number.isFinite(request.contentZoom) && request.contentZoom > 0 ? request.contentZoom : 1;
3127
- const fontSize = 12 * zoom;
3135
+ const fontSize = 14 * zoom;
3128
3136
  const paddingBlock = 6 * zoom;
3129
3137
  const paddingInline = 10 * zoom;
3130
3138
  const borderRadius = 6 * zoom;
@@ -3366,7 +3374,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
3366
3374
  }
3367
3375
 
3368
3376
  // src/features/toolbar/style.css
3369
- styleInject('.react-list-table-shell {\n background: #fff;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 10px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n content: "\\2713";\n margin-left: 12px;\n font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n color: #1677ff;\n background: #e6f4ff;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 12px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n');
3377
+ styleInject('.react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 10px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n content: "\\2713";\n margin-left: 12px;\n font-size: 14px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n color: #1677ff;\n background: #e6f4ff;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n');
3370
3378
  function ReactTableToolbar(props) {
3371
3379
  const { toolbar, title } = props;
3372
3380
  const [densityOpen, setDensityOpen] = useState(false);
@@ -3452,7 +3460,7 @@ function ReactTableToolbar(props) {
3452
3460
  children: /* @__PURE__ */ jsx(ColumnHeightOutlined, {})
3453
3461
  }
3454
3462
  ),
3455
- densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32].map((height) => /* @__PURE__ */ jsx(
3463
+ densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32, 26].map((height) => /* @__PURE__ */ jsx(
3456
3464
  "button",
3457
3465
  {
3458
3466
  type: "button",
@@ -3461,7 +3469,7 @@ function ReactTableToolbar(props) {
3461
3469
  props.onDensityChange(height);
3462
3470
  setDensityOpen(false);
3463
3471
  },
3464
- children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : "\u7D27\u51D1"
3472
+ children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : height === 32 ? "\u7D27\u51D1" : "\u8D85\u7D27\u51D1"
3465
3473
  },
3466
3474
  height
3467
3475
  )) }) : null
@@ -3807,6 +3815,7 @@ function ReactListTableInner(props, ref) {
3807
3815
  () => /* @__PURE__ */ new Map()
3808
3816
  );
3809
3817
  const [columnConfig, setColumnConfig] = useState(() => /* @__PURE__ */ new Map());
3818
+ const [columnConfigRevision, setColumnConfigRevision] = useState(0);
3810
3819
  const resolvedColumns = useMemo(
3811
3820
  () => applyColumnManagerState(
3812
3821
  columns,
@@ -3869,6 +3878,7 @@ function ReactListTableInner(props, ref) {
3869
3878
  return {
3870
3879
  ...nextOptions,
3871
3880
  ...fullscreenSize,
3881
+ columnConfigRevision,
3872
3882
  ui: {
3873
3883
  ...nextOptions.ui,
3874
3884
  onDensityChange: setDensityOverride
@@ -3908,7 +3918,8 @@ function ReactListTableInner(props, ref) {
3908
3918
  tableId,
3909
3919
  rowDrag,
3910
3920
  debug,
3911
- isFullscreen
3921
+ isFullscreen,
3922
+ columnConfigRevision
3912
3923
  ]);
3913
3924
  const {
3914
3925
  containerRef,
@@ -3987,6 +3998,7 @@ function ReactListTableInner(props, ref) {
3987
3998
  next.set(columnKey, visible);
3988
3999
  return next;
3989
4000
  });
4001
+ setColumnConfigRevision((current) => current + 1);
3990
4002
  },
3991
4003
  onColumnOrderChange: (parentKey, orderedKeys) => {
3992
4004
  setColumnOrders((current) => {
@@ -3994,6 +4006,7 @@ function ReactListTableInner(props, ref) {
3994
4006
  next.set(parentKey, orderedKeys);
3995
4007
  return next;
3996
4008
  });
4009
+ setColumnConfigRevision((current) => current + 1);
3997
4010
  },
3998
4011
  onColumnWidthChange: (columnKey, width2) => {
3999
4012
  setColumnConfig((current) => {
@@ -4004,6 +4017,7 @@ function ReactListTableInner(props, ref) {
4004
4017
  });
4005
4018
  return next;
4006
4019
  });
4020
+ setColumnConfigRevision((current) => current + 1);
4007
4021
  },
4008
4022
  onColumnFixedChange: (columnKey, fixed) => {
4009
4023
  setColumnConfig((current) => {
@@ -4014,6 +4028,7 @@ function ReactListTableInner(props, ref) {
4014
4028
  });
4015
4029
  return next;
4016
4030
  });
4031
+ setColumnConfigRevision((current) => current + 1);
4017
4032
  },
4018
4033
  onResetColumns: () => {
4019
4034
  const initialColumns = applyColumnManagerState(
@@ -4029,6 +4044,7 @@ function ReactListTableInner(props, ref) {
4029
4044
  setColumnVisibility(/* @__PURE__ */ new Map());
4030
4045
  setColumnOrders(/* @__PURE__ */ new Map());
4031
4046
  setColumnConfig(/* @__PURE__ */ new Map());
4047
+ setColumnConfigRevision((current) => current + 1);
4032
4048
  });
4033
4049
  }
4034
4050
  }