react-gridix 0.2.7 → 0.2.8

package/README.md

@@ -1513,6 +1513,50 @@ Other slots work the same way: `root`, `toolbar`, `search`, `table`, `thead`, `h
 #### Width
 
 The grid is `width: 100%` of its container by default (it never overflows it: `max-width: 100%; min-width: 0`). To make it narrower, give it a width through `className` (`max-w-3xl`) or `style` (`{ maxWidth: 900 }`).
+## `overflow` column option
+
+Controls what happens to text that doesn't fit the column, in both the header and the cells.
+
+| Value | Behavior | Example (width 60) |
+|---|---|---|
+| `"wrap"` | Breaks the text onto new lines, even inside a word | `Alexa` / `nder` |
+| `"ellipsis"` | Cuts the text and shows `...` | `Alexa...` |
+| `"clip"` | Cuts the text, no dots | `Alexa` |
+
+**Default** (when `overflow` is not set):
+
+- Column has a `width`: `"wrap"`
+- Numeric `width` under 40: `"clip"`
+- No `width`: the grid's normal behavior
+
+### Example
+
+```tsx
+const columns: ColumnDef<Person>[] = [
+  { field: "color", header: "",      width: 6 },                          // thin strip, "clip" by default
+  { field: "id",    header: "ID",    width: 50 },                         // "wrap" by default
+  { field: "name",  header: "Name",  width: 120, overflow: "ellipsis" },  // "Alexander Ha..."
+  { field: "notes", header: "Notes", width: 200, overflow: "wrap" },      // new lines
+  { field: "code",  header: "Code",  width: 80,  overflow: "clip" },      // cut off
+];
+```
+
+### Notes
+
+- Widths under 40 also remove the column's side padding, so `width: 1` really is 1px.
+- `"wrap"` in a very narrow column puts one character per line and makes rows tall. Use `"ellipsis"` or `"clip"` there.
+- To show the full text on hover, add a tooltip in a `cellRenderer`:
+
+```tsx
+{
+  field: "name",
+  header: "Name",
+  width: 120,
+  overflow: "ellipsis",
+  cellRenderer: ({ value }) => <span title={String(value)}>{String(value)}</span>,
+}
+```
+
 
 #### Plain CSS class reference
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gridix",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A simple React library for displaying arrays in tables",
   "author": "Felix Ongom",
   "type": "module",