@lensui/lens-table 0.1.30 → 0.1.32

package/dist/index.cjs

@@ -778,7 +778,8 @@ function isColumnFilterable(column) {
 }
 function getHeaderTitleRequiredWidth(column, titleWidth) {
   const minimumReadableTitleWidth = Math.min(Math.ceil(titleWidth), 28);
-  return minimumReadableTitleWidth + (column.align === "center" ? 20 : 22);
+  const horizontalPadding = 24;
+  return minimumReadableTitleWidth + horizontalPadding + (column.align === "center" ? 20 : 22);
 }
 function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
   const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
@@ -1634,6 +1635,7 @@ function TableInner({
   rows: sourceRows,
   rowKey,
   width = "100%",
+  stretchColumns = true,
   height = "100%",
   autoHeight = true,
   layout,
@@ -2121,8 +2123,8 @@ function TableInner({
   const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
   const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, {
     columnDraggable,
-    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
-  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
+    viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
+  }), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
@@ -4325,7 +4327,10 @@ function TableInner({
           top: headerTop,
           width: width2,
           height: rowHeightForLevel,
-          paddingRight: cell.leaf ? actionWidth + 10 : 10,
+          // Custom headers lay out their own title row and metadata rows. The
+          // action layer may reserve space in the title row, but must not
+          // shrink the entire custom header (including type/comment rows).
+          paddingRight: cell.leaf && !column.renderHeader ? actionWidth + 10 : 10,
           justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
           textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
         },

package/dist/index.d.cts

@@ -342,6 +342,8 @@ interface TableProps<Row extends object> {
     /** Stable row id. Defaults to the row's `id` field when omitted. */
     rowKey?: keyof Row | ((row: Row, index: number) => GridKey);
     width?: number | string;
+    /** Stretch columns to fill unused viewport width. Defaults to true. */
+    stretchColumns?: boolean;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
     /** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */

package/dist/index.d.ts

@@ -342,6 +342,8 @@ interface TableProps<Row extends object> {
     /** Stable row id. Defaults to the row's `id` field when omitted. */
     rowKey?: keyof Row | ((row: Row, index: number) => GridKey);
     width?: number | string;
+    /** Stretch columns to fill unused viewport width. Defaults to true. */
+    stretchColumns?: boolean;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
     /** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */

package/dist/index.js

@@ -748,7 +748,8 @@ function isColumnFilterable(column) {
 }
 function getHeaderTitleRequiredWidth(column, titleWidth) {
   const minimumReadableTitleWidth = Math.min(Math.ceil(titleWidth), 28);
-  return minimumReadableTitleWidth + (column.align === "center" ? 20 : 22);
+  const horizontalPadding = 24;
+  return minimumReadableTitleWidth + horizontalPadding + (column.align === "center" ? 20 : 22);
 }
 function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
   const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
@@ -1604,6 +1605,7 @@ function TableInner({
   rows: sourceRows,
   rowKey,
   width = "100%",
+  stretchColumns = true,
   height = "100%",
   autoHeight = true,
   layout,
@@ -2091,8 +2093,8 @@ function TableInner({
   const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
   const metrics = useMemo(() => buildColumnMetrics(columns, {
     columnDraggable,
-    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
-  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
+    viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
+  }), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = useMemo(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
@@ -4295,7 +4297,10 @@ function TableInner({
           top: headerTop,
           width: width2,
           height: rowHeightForLevel,
-          paddingRight: cell.leaf ? actionWidth + 10 : 10,
+          // Custom headers lay out their own title row and metadata rows. The
+          // action layer may reserve space in the title row, but must not
+          // shrink the entire custom header (including type/comment rows).
+          paddingRight: cell.leaf && !column.renderHeader ? actionWidth + 10 : 10,
           justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
           textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",