diff --git a/.changeset/resize-max-size-and-header-ellipsis.md b/.changeset/resize-max-size-and-header-ellipsis.md new file mode 100644 index 0000000..6a74f0d --- /dev/null +++ b/.changeset/resize-max-size-and-header-ellipsis.md @@ -0,0 +1,15 @@ +--- +'@zvndev/yable-core': minor +'@zvndev/yable-react': patch +'@zvndev/yable-themes': patch +--- + +Add `resizeMaxSize` and stop the header ellipsis from clipping label-less headers + +- **core:** New per-column `resizeMaxSize` caps USER drag-resize independently of + `maxSize` (defaults to `maxSize`, fully back-compatible). `maxSize` still caps + auto-sizing/stretch; set `resizeMaxSize` (e.g. `Infinity`, or app-wide via + `defaultColumnDef`) to let a human drag a column past its auto-size cap. +- **react/themes:** The header-label ellipsis now only applies to string headers + (marked `.yable-th-label`). Component/empty headers such as a selection-column + checkbox are no longer collapsed and cropped. diff --git a/apps/docs/content/docs/features/column-resizing.mdx b/apps/docs/content/docs/features/column-resizing.mdx index b37db72..6c99c94 100644 --- a/apps/docs/content/docs/features/column-resizing.mdx +++ b/apps/docs/content/docs/features/column-resizing.mdx @@ -24,13 +24,33 @@ columnHelper.accessor('name', { header: 'Name', size: 200, // Default width in px minSize: 100, // Minimum width - maxSize: 400, // Maximum width + maxSize: 400, // Maximum width (also caps auto-sizing/stretch) + resizeMaxSize: Infinity, // Upper bound for USER drag-resize (defaults to maxSize) enableResizing: true, }) ``` +### Separating the resize cap from `maxSize` + +`maxSize` caps **both** auto-sizing/stretch **and** user drag-resize, so a column +given a `maxSize` for auto-size discipline feels non-resizable past that width. +Use `resizeMaxSize` to raise the ceiling for user drags only — `maxSize` keeps +capping auto-sizing/stretch, while a human can drag the column up to +`resizeMaxSize`. It defaults to `maxSize` (fully back-compatible). + +```typescript +// App-wide: let users drag any column past its auto-size cap. +const table = useTable({ + data, + columns, + enableColumnResizing: true, + defaultColumnDef: { resizeMaxSize: Infinity }, +}) +``` + ### Notes - `columnResizeMode: 'onChange'` updates widths as the user drags - `columnResizeMode: 'onEnd'` only updates when the user releases the mouse - The `table.getTotalSize()` method returns the total width of all visible columns +- `resizeMaxSize` only affects user drag-resize; auto-sizing/stretch always honor `maxSize` diff --git a/e2e/interactions.spec.ts b/e2e/interactions.spec.ts index 6dc26ce..3762cd9 100644 --- a/e2e/interactions.spec.ts +++ b/e2e/interactions.spec.ts @@ -667,3 +667,57 @@ test.describe('resize handle alignment', () => { expect(handleBox.x + handleBox.width).toBeGreaterThan(boundary) }) }) + +// The header-label ellipsis clip (added in 0.6.1) must only apply to STRING +// headers. A `selectColumn()` renders a checkbox `