react-gridix 0.2.6 → 0.2.8

package/README.md

@@ -1,4 +1,4 @@
-# react-gridix Documentation
+# React-gridix
 
 A React `DataGrid` with row selection, server-side mode, typed per-column filters, date columns, in-cell editing, resizing and pinning, virtualization, export to CSV / Excel / JSON / PDF, 12 row animations, filter comparisons and 8 themes, plus the `Checkbox` it uses.
 
@@ -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
 
@@ -2685,7 +2729,82 @@ function NothingHere({ reason, clearAll, search }: EmptyStateProps<User>) {
 - When rows are removed with an exit animation, the component appears once the last row has left.
 - Keep using `emptyMessage` for a plain sentence. `emptyComponent` wins when both are set.
 
-### 6.27 Known limitations
+### 6.27 Column widths
+
+`width` takes a number (pixels) or any CSS length. `minWidth` and `maxWidth` limit the column.
+
+```tsx
+const columns = [
+  { field: "id",    header: "ID",    width: 70 },        // 70 px
+  { field: "name",  header: "Name",  width: "30%" },     // a share of the grid
+  { field: "email", header: "Email", width: "16rem" },   // any CSS length
+  { field: "notes", header: "Notes", minWidth: 200 },    // no width: takes the space that is left
+];
+```
+
+- When any column has a `width`, the grid uses a fixed table layout, so the browser takes your widths literally.
+- If **every** column has a numeric width, the table is exactly as wide as their sum (it does not stretch).
+- Columns without a `width` share the remaining space.
+- Dragging a column border still works and overrides the starting width (limited by `minWidth` / `maxWidth`).
+
+### 6.28 Sticky toolbar and header, and scroll bars
+
+**With an inner scroll box** (`maxHeight`) the header already stays at the top and the toolbar and footer stay outside the scrolling part:
+
+```tsx
+<DataGrid rows={rows} columns={columns} maxHeight="60vh" />
+```
+
+**While the whole page scrolls** (optional, off by default):
+
+```tsx
+<DataGrid rows={rows} columns={columns} stickyToolbar stickyHeader />
+
+// Under a fixed top bar of your own that is 64px tall
+<DataGrid rows={rows} columns={columns} stickyToolbar stickyHeader stickyOffset={64} />
+
+// Only the header
+<DataGrid rows={rows} columns={columns} stickyHeader stickyOffset="4rem" />
+```
+
+The header sits right under the toolbar when both are sticky. In this mode the grid has no scroll box of its own, so a table wider than the page overflows: give the columns widths that fit (see 6.28). It is ignored when `maxHeight` or `virtualize` is set, because those already scroll inside the grid.
+
+**Scroll bars inside the grid** are thin by default. Use `scrollbar` to change them:
+
+```tsx
+<DataGrid scrollbar="thin" />     // default: slim bar
+<DataGrid scrollbar="auto" />     // the browser's normal bar
+<DataGrid scrollbar="hidden" />   // no bar, scrolling still works
+<DataGrid scrollbar="custom" />   // no style from the grid: your CSS applies
+```
+
+Colours of the thin bar come from CSS variables:
+
+```css
+.my-grid {
+  --rg-scrollbar-thumb: #6366f1;     /* the moving part */
+  --rg-scrollbar-track: #eef2ff;     /* the rail */
+  --rg-scrollbar-width: auto;        /* thin | auto | none */
+}
+```
+
+Full control (size, rounded ends, hover colour) with `scrollbar="custom"`:
+
+```tsx
+<DataGrid scrollbar="custom" classNames={{ scroll: "my-scroll" }} />
+```
+
+```css
+.my-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.my-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
+.my-scroll::-webkit-scrollbar-thumb:hover { background: #475569; }
+.my-scroll { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; } /* Firefox */
+```
+
+The list of options in a `filterType: "select"` popup scrolls without showing a scroll bar.
+
+
+### 6.29 Known limitations
 
 Not included:
 

package/package.json

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