@ceed/ads 1.41.0 → 1.41.1

package/dist/components/data-display/DataTable.md

@@ -1640,6 +1640,95 @@ const columns = [
 - Supported values: `1 | 2`.
 - Works with all existing features: sorting, pinning, resizing, and column grouping.
 
+## Column Width
+
+Columns keep the width you specify. When every column has an explicit `width`, the table appends an
+invisible filler column that absorbs the space left over, so a `200px` column renders at exactly 200px
+instead of stretching to fill the container.
+
+```tsx
+<Stack gap={1}>
+    <Typography level="body-sm" textColor="text.secondary">
+      Three 200px columns in a 900px container. Each column keeps exactly 200px instead of
+      stretching to fill the table, and dragging a resize handle moves the edge 1:1.
+    </Typography>
+    <Box
+      sx={{
+        width: "900px"
+      }}
+    >
+      <DataTable rows={widthRows} columns={columns} noWrap />
+    </Box>
+  </Stack>
+```
+
+```tsx
+const columns = [
+  { field: 'name', headerName: 'Name', width: '200px' },
+  { field: 'category', headerName: 'Category', width: '200px' },
+  { field: 'calories', headerName: 'Calories', type: 'number', width: '200px' },
+];
+```
+
+Dragging a resize handle moves the column edge 1:1 with the pointer — the other columns keep their
+widths and the filler absorbs the difference.
+
+```tsx
+<Stack gap={1}>
+    <Typography level="body-sm" textColor="text.secondary">
+      Drag the handle on the Name column — the edge follows the pointer 1:1 and the other columns
+      stay put.
+    </Typography>
+    <Box
+      sx={{
+        width: "900px"
+      }}
+    >
+      <DataTable rows={widthRows} columns={columns} noWrap />
+    </Box>
+  </Stack>
+```
+
+### Letting a Column Fill the Remaining Space
+
+Omit `width` on a column and it absorbs all the leftover space — no filler column is added.
+
+```tsx
+<Stack gap={1}>
+    <Typography level="body-sm" textColor="text.secondary">
+      Leave a column without a width and it absorbs all the leftover space, exactly as before.
+    </Typography>
+    <Box
+      sx={{
+        width: "900px"
+      }}
+    >
+      <DataTable rows={widthRows} columns={columns} noWrap />
+    </Box>
+  </Stack>
+```
+
+```tsx
+const columns = [
+  { field: 'name', headerName: 'Name' }, // fills the remaining space
+  { field: 'category', headerName: 'Category', width: '200px' },
+  { field: 'calories', headerName: 'Calories', type: 'number', width: '200px' },
+];
+```
+
+#### Notes
+
+- Percentage widths (`'40%'`) resolve against the table width, so `40%` really is 40% of the table.
+- When the columns are wider than the container the filler collapses to 0 and horizontal scrolling
+  works as usual — pinned columns stay pinned.
+- `minWidth` is enforced by the layout; `maxWidth` is only applied while dragging the resize handle.
+- Dragging a resize handle now moves the column edge 1:1 with the pointer.
+- Column groups and the no-rows overlay account for the filler automatically — group `colspan`
+  values and the overlay's `colSpan` are unaffected.
+- A custom `slots.footer` writes its own `colSpan` values. Those keep aligning with the data
+  columns, but the footer will not extend under the filler column. Add one trailing empty `<td />`
+  if you want the footer to span the full table width.
+
 ## Editing Features
 
 ### Inline Editing