@lensui/lens-table 0.1.65 → 0.1.67

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 (5) hide show
  1. package/dist/index.cjs +14 -13
  2. package/dist/index.d.cts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +14 -13
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1252,7 +1252,7 @@ function paintGrid(options) {
1252
1252
  ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
1253
1253
  ctx.fillRect(x, y, cellWidth, cellHeight);
1254
1254
  }
1255
- ctx.fillStyle = colors.grid;
1255
+ ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
1256
1256
  if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
1257
1257
  ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
1258
1258
  }
@@ -1286,7 +1286,7 @@ function paintGrid(options) {
1286
1286
  if (column.rowDragHandle) {
1287
1287
  const iconLeft = x + (cellWidth - 16) / 2;
1288
1288
  const iconTop = y + (cellHeight - 16) / 2;
1289
- ctx.fillStyle = colors.icon;
1289
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.icon;
1290
1290
  ctx.beginPath();
1291
1291
  for (const circleX of [5, 11]) {
1292
1292
  for (const circleY of [4, 8, 12]) {
@@ -1874,6 +1874,7 @@ function TableInner({
1874
1874
  onColumnsReorder,
1875
1875
  onColumnResize,
1876
1876
  rowDraggable = false,
1877
+ utilityColumnOrder = ["drag", "selection", "rowNumber"],
1877
1878
  onRowsReorder,
1878
1879
  onInsertRows,
1879
1880
  onDeleteRows,
@@ -1948,21 +1949,21 @@ function TableInner({
1948
1949
  }, [sourceColumns]);
1949
1950
  const columns = (0, import_react8.useMemo)(() => {
1950
1951
  const utilityColumns = [];
1951
- if (rowDraggable) {
1952
- utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1953
- }
1954
- if (showRowCheckbox) {
1955
- utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1956
- }
1957
- if (rowNumber) {
1958
- utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
1959
- }
1952
+ utilityColumnOrder.forEach((utilityColumn) => {
1953
+ if (utilityColumn === "drag" && rowDraggable) {
1954
+ utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1955
+ } else if (utilityColumn === "selection" && showRowCheckbox) {
1956
+ utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1957
+ } else if (utilityColumn === "rowNumber" && rowNumber) {
1958
+ utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
1959
+ }
1960
+ });
1960
1961
  const dataColumns = leafSourceColumns.map((column) => {
1961
1962
  const resizedWidth = resizedColumnWidths[column.key];
1962
1963
  return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
1963
1964
  });
1964
1965
  return [...utilityColumns, ...dataColumns];
1965
- }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
1966
+ }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
1966
1967
  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
1967
1968
  const headerCells = (0, import_react8.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
1968
1969
  const activeCustomHeaderLevels = (0, import_react8.useMemo)(() => {
@@ -2109,7 +2110,7 @@ function TableInner({
2109
2110
  if (!activeCustomHeaderLevels.has(key)) customHeaderMeasurementsRef.current.delete(key);
2110
2111
  });
2111
2112
  if (activeCustomHeaderLevels.size === 0) {
2112
- setMeasuredHeaderRowHeights([]);
2113
+ setMeasuredHeaderRowHeights((current) => current.length === 0 ? current : []);
2113
2114
  return;
2114
2115
  }
2115
2116
  measureCustomHeaderHeight();
package/dist/index.d.cts CHANGED
@@ -421,6 +421,8 @@ interface TableProps<Row extends object> {
421
421
  }) => void;
422
422
  onColumnResize?: (columnKey: string, width: number) => void;
423
423
  rowDraggable?: boolean;
424
+ /** Order of the generated row utility columns. Defaults to drag, selection, then row number. */
425
+ utilityColumnOrder?: Array<'drag' | 'selection' | 'rowNumber'>;
424
426
  onRowsReorder?: (rows: Row[], detail: {
425
427
  sourceIndex: number;
426
428
  targetIndex: number;
package/dist/index.d.ts CHANGED
@@ -421,6 +421,8 @@ interface TableProps<Row extends object> {
421
421
  }) => void;
422
422
  onColumnResize?: (columnKey: string, width: number) => void;
423
423
  rowDraggable?: boolean;
424
+ /** Order of the generated row utility columns. Defaults to drag, selection, then row number. */
425
+ utilityColumnOrder?: Array<'drag' | 'selection' | 'rowNumber'>;
424
426
  onRowsReorder?: (rows: Row[], detail: {
425
427
  sourceIndex: number;
426
428
  targetIndex: number;
package/dist/index.js CHANGED
@@ -1222,7 +1222,7 @@ function paintGrid(options) {
1222
1222
  ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
1223
1223
  ctx.fillRect(x, y, cellWidth, cellHeight);
1224
1224
  }
1225
- ctx.fillStyle = colors.grid;
1225
+ ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
1226
1226
  if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
1227
1227
  ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
1228
1228
  }
@@ -1256,7 +1256,7 @@ function paintGrid(options) {
1256
1256
  if (column.rowDragHandle) {
1257
1257
  const iconLeft = x + (cellWidth - 16) / 2;
1258
1258
  const iconTop = y + (cellHeight - 16) / 2;
1259
- ctx.fillStyle = colors.icon;
1259
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.icon;
1260
1260
  ctx.beginPath();
1261
1261
  for (const circleX of [5, 11]) {
1262
1262
  for (const circleY of [4, 8, 12]) {
@@ -1844,6 +1844,7 @@ function TableInner({
1844
1844
  onColumnsReorder,
1845
1845
  onColumnResize,
1846
1846
  rowDraggable = false,
1847
+ utilityColumnOrder = ["drag", "selection", "rowNumber"],
1847
1848
  onRowsReorder,
1848
1849
  onInsertRows,
1849
1850
  onDeleteRows,
@@ -1918,21 +1919,21 @@ function TableInner({
1918
1919
  }, [sourceColumns]);
1919
1920
  const columns = useMemo2(() => {
1920
1921
  const utilityColumns = [];
1921
- if (rowDraggable) {
1922
- utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1923
- }
1924
- if (showRowCheckbox) {
1925
- utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1926
- }
1927
- if (rowNumber) {
1928
- utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
1929
- }
1922
+ utilityColumnOrder.forEach((utilityColumn) => {
1923
+ if (utilityColumn === "drag" && rowDraggable) {
1924
+ utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1925
+ } else if (utilityColumn === "selection" && showRowCheckbox) {
1926
+ utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1927
+ } else if (utilityColumn === "rowNumber" && rowNumber) {
1928
+ utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
1929
+ }
1930
+ });
1930
1931
  const dataColumns = leafSourceColumns.map((column) => {
1931
1932
  const resizedWidth = resizedColumnWidths[column.key];
1932
1933
  return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
1933
1934
  });
1934
1935
  return [...utilityColumns, ...dataColumns];
1935
- }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
1936
+ }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
1936
1937
  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
1937
1938
  const headerCells = useMemo2(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
1938
1939
  const activeCustomHeaderLevels = useMemo2(() => {
@@ -2079,7 +2080,7 @@ function TableInner({
2079
2080
  if (!activeCustomHeaderLevels.has(key)) customHeaderMeasurementsRef.current.delete(key);
2080
2081
  });
2081
2082
  if (activeCustomHeaderLevels.size === 0) {
2082
- setMeasuredHeaderRowHeights([]);
2083
+ setMeasuredHeaderRowHeights((current) => current.length === 0 ? current : []);
2083
2084
  return;
2084
2085
  }
2085
2086
  measureCustomHeaderHeight();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lensui/lens-table",
3
- "version": "0.1.65",
3
+ "version": "0.1.67",
4
4
  "description": "A lightweight, canvas-rendered React table component for LensUI.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",