react-gridix 0.2.5 → 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.
 
@@ -128,7 +128,7 @@ import logo from "./logo.png";
 ``
 
 Without `libraries`, or if an import fails, a PDF export reports an error that says what to install (see `onExportError`) and everything else keeps working.
-
+```
 ---
 
 ## 3. Quick start
@@ -534,6 +534,36 @@ const columns: ColumnDef<Employee>[] = [
   { field: "hired", headerName: "Hired", type: "date", sortable: true, filterable: true },
 ];
 ```
+```tsx
+const columns: ColumnDef<User>[] = [
+  // all eight comparisons
+  { field: "name", headerName: "Name", filterable: true, filterOperators: true },
+
+  // only some of them, with a different one selected first
+  {
+    field: "email",
+    headerName: "Email",
+    filterable: true,
+    filterOperators: ["contains", "startsWith", "endsWith", "equals"],
+    filterOperator: "startsWith",
+  },
+
+  // no filterOperators: a plain box that always means "contains"
+  { field: "city", headerName: "City", filterable: true },
+];
+```
+##### summary
+| Value | Label shown |
+| --- | --- |
+| `"contains"` | Contains |
+| `"notContains"` | Does not contain |
+| `"equals"` | Equals |
+| `"notEquals"` | Not equal |
+| `"startsWith"` | Starts with |
+| `"notStartsWith"` | Does not start with |
+| `"endsWith"` | Ends with |
+| `"notEndsWith"` | Does not end with | 
+
 
 | Option | Type | Description |
 | --- | --- | --- |
@@ -579,6 +609,7 @@ const columns: ColumnDef<Employee>[] = [
 | `checkbox` | `ColumnCheckboxOptions` | Look of the checkbox in a `type: "boolean"` column: `variant`, `indicator`, `className`, `style`, `classNames`, `styles` |
 | `headerCheckbox` | `boolean` | On a `type: "boolean"` column, draws a select-all checkbox in the header. See [Select-all header checkbox](#select-all-header-checkbox) |
 
+
 #### Row numbers (sequence column)
 
 `type: "sequence"` adds a column of row numbers. It needs no data in your rows: give it a `field` that starts with `#` (so it can never clash with a real field) and a header.
@@ -2654,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.5",
+  "version": "0.2.7",
   "description": "A simple React library for displaying arrays in tables",
   "author": "Felix Ongom",
   "type": "module",