react-gridix 0.2.6 → 0.2.7

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.
 
@@ -2685,7 +2685,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.7",
   "description": "A simple React library for displaying arrays in tables",
   "author": "Felix Ongom",
   "type": "module",