react-gridix 0.2.4 → 0.2.5

package/README.md

@@ -11,7 +11,8 @@ A React `DataGrid` with row selection, server-side mode, typed per-column filter
 5. [Checkbox](#5-checkbox)
 6. [DataGrid](#6-datagrid)
 7. [Demos](#7-demos)
-8. [Troubleshooting](#8-troubleshooting)
+8. [Troubleshooting](#9-troubleshooting)
+
 ---
 
 ## 1. Overview
@@ -42,12 +43,13 @@ A React `DataGrid` with row selection, server-side mode, typed per-column filter
 
 Everything is written in TypeScript, ships its own type definitions, and uses plain CSS (no CSS-in-JS runtime). The grid is 100% of its container's width by default. There is deliberately **no column reordering**.
 
----
-![react-gridix ui](images/data-smaple-ui.PNG)
-
-![react-gridix ui](images/Capture.PNG)
+Demo Display
+![Drag Racing](https://raw.githubusercontent.com/felixongom/react-gridix/refs/heads/main/images/Capture1.PNG)
+![Drag Racing](https://raw.githubusercontent.com/felixongom/react-gridix/refs/heads/main/images/Capture.PNG)
+![Drag Racing](https://raw.githubusercontent.com/felixongom/react-gridix/refs/heads/main/images/data-smaple-ui.PNG)
+![Drag Racing](https://raw.githubusercontent.com/felixongom/react-gridix/refs/heads/main/images/Tailwind.PNG)
 
-![react-gridix ui](images/Capture1.PNG)
+---
 
 ## 2. Installation
 
@@ -65,14 +67,67 @@ import "react-gridix/style.css";
 
 The library does not inject CSS by itself. If the grid looks unstyled, this import is missing.
 
-**Optional: PDF export.** CSV, Excel (`.xlsx`) and JSON export need nothing extra. PDF export uses three small libraries that are loaded only when someone exports a PDF, so install them only if you use it:
+**Optional: PDF export.** CSV, Excel (`.xlsx`) and JSON export need nothing extra. PDF export uses three small libraries. The grid does **not** import them (so your app builds and runs without them); you install them and hand them over, ideally through a function that imports them only when someone exports a PDF:
 
 ```bash
 npm install jspdf jspdf-autotable        # the PDF itself and its table
 npm install html2canvas                  # only if the PDF header / footer is a React element (it is drawn to a picture)
 ```
 
-Without them, a PDF export reports an error that names the missing package (see `onExportError`) and everything else keeps working.
+```tsx
+<DataGrid
+  exportable={{
+    formats: ["csv", "pdf"],
+    pdf: {
+      libraries: async () => ({
+        jsPDF: (await import("jspdf")).jsPDF,
+        autoTable: (await import("jspdf-autotable")).default,
+        html2canvas: (await import("html2canvas")).default,   // only for a header / footer element
+      }),
+    },
+  }}
+/>
+```
+Read more about stying pdf here [stying pdf here](https://github.com/simonbengtsson/jsPDF-AutoTable). Use the style property in `autoTableOptions` for styling cells
+
+Adding `Header` and  `Footer` component 
+```tsx
+import logo from "./logo.png";
+
+<DataGrid
+  columns={columns}
+  rows={rows}
+  getRowId={(r) => r.id}
+  exportable={{
+    formats: ["pdf"],
+    pdf: {
+      libraries: async () => ({
+        jsPDF: (await import("jspdf")).jsPDF,
+        autoTable: (await import("jspdf-autotable")).default,
+        html2canvas: (await import("html2canvas")).default,   // required for an element
+      }),
+
+      header: (
+        <div style={{ display: "flex", alignItems: "center", gap: 12, borderBottom: "3px solid #4f46e5", paddingBottom: 6 }}>
+          <img src={logo} alt="" width={40} height={40} style={{ borderRadius: 8 }} />
+          <div>
+            <div style={{ fontSize: 20, fontWeight: 700, color: "#312e81" }}>Acme Corporation</div>
+            <div style={{ fontSize: 12, color: "#6b7280" }}>People &amp; Culture report</div>
+          </div>
+        </div>
+      ),
+
+      footer: (
+        <div style={{ textAlign: "center", fontSize: 11, color: "#6b7280" }}>
+          Confidential. Do not share.
+        </div>
+      ),
+    },
+  }}
+/>
+``
+
+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.
 
 ---
 
@@ -1943,7 +1998,7 @@ The menu has two parts. **Rows to export** lets the user pick *Visible rows* (wh
 | `"csv"` | Text of the displayed values, opens in any spreadsheet | nothing |
 | `"xlsx"` | A real Excel workbook: bold coloured header row that stays in place while you scroll, auto-filter, sized columns, real numbers, real dates and real booleans | nothing (written by the library itself) |
 | `"json"` | An array of objects, one per row, with real numbers and booleans and ISO dates (`"2026-11-05"`) | nothing |
-| `"pdf"` | A paged table with an optional title, header, footer and "Page 1 of 3" | `jspdf` and `jspdf-autotable` (and `html2canvas` for a header / footer element) |
+| `"pdf"` | A paged table with an optional title, header, footer and "Page 1 of 3" | `jspdf` and `jspdf-autotable` (and `html2canvas` for a header / footer element), given in `pdf.libraries` |
 
 The same exports are available from code, for your own buttons:
 
@@ -1971,6 +2026,89 @@ const csv: string = api.current!.getCsv();
 />
 ```
 
+To export pdf, install supporting pdf libraries
+```bash
+npm install jspdf jspdf-autotable        # the PDF itself and its table
+npm install html2canvas                  # only if the PDF header / footer is a React element (it is drawn to a picture)
+```
+
+```tsx
+<DataGrid
+  exportable={{
+    formats: ["csv", "pdf"],
+    pdf: {
+      libraries: async () => ({
+        jsPDF: (await import("jspdf")).jsPDF,
+        autoTable: (await import("jspdf-autotable")).default,
+        html2canvas: (await import("html2canvas")).default,   // only for a header / footer element
+      }),
+    },
+  }}
+/>
+```
+
+```tsx
+<DataGrid
+  rowSelection
+  pagination
+  columns={columns}
+  rows={rows}
+  getRowId={(r) => r.id}
+  exportable={{
+    filename: "employees",
+    formats: ["csv", "xlsx", "json", "pdf"],
+    pdf: {
+      // required for PDF (npm install jspdf jspdf-autotable html2canvas)
+      libraries: async () => ({
+        jsPDF: (await import("jspdf")).jsPDF,
+        autoTable: (await import("jspdf-autotable")).default,
+        html2canvas: (await import("html2canvas")).default,
+      }),
+
+      title: <TitleComponent />,
+      margin: { top: 60, right: 30, bottom: 50, left: 30 },
+      tableTheme: "grid",                       // "striped" | "grid" | "plain"
+
+      style: {
+        headColor: "#f59e0b",                   // header row background
+        headTextColor: "#111827",
+        stripeColors: ["#ffffff", "#f1f5f9"],   // rows alternate between these
+        bodyTextColor: "#1f2937",
+        borderColor: "#cbd5e1",
+        borderWidth: 0.4,
+        cellPadding: { top: 6, bottom: 6, left: 8, right: 8 },
+        fontSize: 10,
+        pageBackground: "#ffffff",              // try "#0f172a" for a dark page
+        columns: {                              // per column, by its field
+          salary: { fontStyle: "bold", align: "right" },
+          name: { width: 120 },
+        },
+      },
+    },
+  }}
+/>
+```
+Setting Border bottom
+```tsx
+pdf: {
+  libraries:async () => ({
+    jsPDF: (await import("jspdf")).jsPDF,
+    autoTable: (await import("jspdf-autotable")).default,
+    html2canvas: (await import("html2canvas")).default,
+  }),
+  // 
+  tableTheme: "plain",                       // plain draws no lines, so only your bottom border shows
+  autoTableOptions: {
+    styles: {
+      lineWidth: { bottom: 0.5 },            // points; only the bottom side
+      lineColor: [203, 213, 225],            // [r, g, b]
+    },
+  },
+}
+```
+Read more about stying pdf here [stying pdf here](https://github.com/simonbengtsson/jsPDF-AutoTable). Use the style property in `autoTableOptions` for styling cells
+
+
 **Which rows.** `scope` accepts `"filtered"` (default), `"visible"` or `"page"` (the same: the rows on screen) and `"selected"`. A page export continues the row numbers of a `sequence` column (page 2 starts at 11) unless the column has `sequenceRestartEachPage`.
 
 **What each format writes.** CSV and PDF write the displayed text (`valueFormatter` applied, `Yes` / `No` for booleans, dates as `YYYY-MM-DD`). Excel and JSON write real values: a number column stays a number (`52000`, not `"$52,000"`), a boolean column stays `true` / `false`, a date column is a real Excel date, a column with a `valueFormatter` that changes text (for example codes shown as names) writes the shown text. A column's `exportValue(value, row)` overrides all of this in every format.
@@ -1985,7 +2123,7 @@ const csv: string = api.current!.getCsv();
   exportable={{
     formats: ["pdf"],
     pdf: {
-      title: "Employee list",
+      title: <TitleComponent />,
       header: "Acme Corporation, People report ({date})",
       footer: "Confidential, page {page} of {pages}",
     },
@@ -2027,15 +2165,19 @@ Other `pdf` options:
 
 | Option | Default | Meaning |
 | --- | --- | --- |
+| `libraries` | | **Required.** `{ jsPDF, autoTable, html2canvas? }` or a function returning them (see Installation) |
 | `title` | | A heading above the table on the first page |
 | `header`, `footer` | | A string or element, on every page |
 | `headerAlign`, `footerAlign` | `"left"`, `"center"` | Where a **string** goes: `"left"`, `"center"`, `"right"` |
 | `orientation` | `"auto"` | `"portrait"`, `"landscape"`, or `"auto"` (landscape when there are more than 6 columns) |
 | `pageSize` | `"a4"` | `"a3"`, `"a4"`, `"a5"`, `"letter"`, `"legal"` |
-| `margin` | `36` | Points around the page (72 points = 1 inch) |
+| `margin` | `36` | Points around the page (72 points = 1 inch): a number, or `{ top, right, bottom, left }` |
 | `fontSize` | `9` | Table text size in points |
 | `tableTheme` | `"striped"` | `"striped"`, `"grid"` or `"plain"` |
-| `headColor`, `headTextColor` | `"#4f46e5"`, `"#ffffff"` | Colours of the table's header row, as hex |
+| `headColor`, `headTextColor` | `"#4f46e5"`, `"#ffffff"` | Colours of the table's header row (any CSS colour) |
+| `matchGridStyle` | `false` | Copy the grid's on-screen look into the PDF. See [PDF styling](#pdf-styling) |
+| `style` | | Colours, stripes, borders, padding, page background, per-column looks. See [PDF styling](#pdf-styling) |
+| `autoTableOptions` | | Raw options for jspdf-autotable, merged last, for anything not covered |
 | `pageNumbers` | `true` | "Page 1 of 3" in the bottom right |
 | `maxImageHeight` | `90` | Tallest header / footer picture, in points |
 | `fontName`, `beforeRender` | | Use another font (see below) |
@@ -2052,6 +2194,72 @@ pdf: {
 }
 ```
 
+#### PDF styling
+
+By default the PDF has its own look (indigo header, light stripes). Two ways to change it, and they combine.
+
+**1. Copy the grid's look, only when you ask.** `matchGridStyle: true` reads the grid as it is on screen when the export runs: the header's background and text colour, the text colour and size of the rows, the two stripe colours (with `striped`), the row borders, and the grid's own background (which matters for dark themes). It reads real elements, so it follows `theme`, Tailwind classes and your CSS. Without the option nothing is read.
+
+```tsx
+<DataGrid theme="midnight" striped exportable={{ formats: ["pdf"], pdf: { libraries, matchGridStyle: true } }} />
+```
+
+Fonts are not copied: jsPDF cannot use a web font without its file (see `fontName`).
+
+**2. Set it yourself with `style`.** Every field is optional, and colours are any CSS colour (`"#4f46e5"`, `"rgb(79,70,229)"`, `"tomato"`).
+
+```tsx
+pdf: {
+  libraries,
+  margin: { top: 60, right: 30, bottom: 50, left: 30 },
+  tableTheme: "grid",                                  // "striped" | "grid" | "plain"
+  style: {
+    pageBackground: "#0f172a",                         // colour behind everything, on every page
+    headColor: "#f59e0b",
+    headTextColor: "#111827",
+    stripeColors: ["#1e293b", "#334155"],              // rows alternate between these two
+    bodyTextColor: "#e2e8f0",
+    borderColor: "#475569",
+    borderWidth: 0.4,                                  // points
+    cellPadding: { top: 6, bottom: 6, left: 8, right: 8 },
+    fontSize: 10,
+    columns: {                                         // per column, by its `field`
+      salary: { fontStyle: "bold", textColor: "#fbbf24", align: "right" },
+      name: { width: 120 },
+    },
+  },
+}
+```
+
+| `style` field | Meaning |
+| --- | --- |
+| `headColor`, `headTextColor`, `headFontSize`, `headFontStyle` | The table's header row (`headFontStyle`: `"normal"`, `"bold"` (default), `"italic"`, `"bolditalic"`) |
+| `bodyColor` | Background of every body row (when there are no `stripeColors`) |
+| `stripeColors` | `[colorA, colorB]`: rows alternate, starting with A |
+| `bodyTextColor` | Text colour of body rows |
+| `borderColor`, `borderWidth` | Lines between cells (points) |
+| `cellPadding` | Space inside cells: a number or `{ top, right, bottom, left }`. Default 4 |
+| `minRowHeight` | Smallest row height in points |
+| `fontSize`, `fontName` | Table text size (default 9) and a font you registered |
+| `pageBackground` | Paper colour. Header, footer, title and table text turn light by themselves when it is dark |
+| `textColor`, `titleColor`, `titleSize` | Header / footer / page-number text, and the `title` |
+| `margin` | Same as the `margin` option |
+| `columns` | `{ [field]: { width, align, textColor, backgroundColor, fontStyle, fontSize } }`. `width` is points, `"auto"` or `"wrap"` |
+
+**Which wins.** Weakest to strongest: built-in defaults, the grid's look (`matchGridStyle`), the flat options (`headColor`, `fontSize`, `margin`, ...), then `style`. So you can copy the grid and still force one colour:
+
+```tsx
+pdf: { matchGridStyle: true, style: { headColor: "#0f766e" } }     // the grid's look, but a teal header
+```
+
+**Anything else.** `autoTableOptions` is handed to jspdf-autotable last, and its `styles`, `headStyles`, `bodyStyles`, `alternateRowStyles` and `margin` are merged key by key into ours:
+
+```tsx
+pdf: { autoTableOptions: { rowPageBreak: "avoid", didParseCell: (data) => { if (data.column.index === 5 && Number(data.cell.raw.replace(/\D/g, "")) > 100000) data.cell.styles.textColor = [220, 38, 38]; } } }
+```
+
+Header and footer *elements* are drawn on the page's colour, so they blend into a `pageBackground`.
+
 #### Export options
 
 | `ExportOptions` | Default | Meaning |
@@ -2470,6 +2678,7 @@ Behaviours to be aware of:
 - In `serverSide` mode the grid cannot export or select rows it has never loaded.
 - The date calendar starts weeks on Sunday and has no week numbers or time of day.
 - Excel export writes one worksheet. It does not carry the grid's colours or fonts, only a styled header row.
+- The PDF is styled by its own `pdf` options. It only copies the grid's look when `matchGridStyle` is on, and then only colours, stripes, borders and text size, not fonts or exact spacing.
 - PDF text uses jsPDF's built-in Western European fonts unless you register another one (`pdf.fontName`). A PDF header / footer element is a picture: its text cannot be selected.
 - Rows that leave play their exit animation as a copy in place; the table closes the gap when the animation ends instead of sliding the rows below up.
 
@@ -2509,8 +2718,7 @@ The Styling demo loads Tailwind from its CDN, so it needs an internet connection
 
 ---
 
-
-## 8. Troubleshooting
+## 9. Troubleshooting
 
 | Problem | Cause and fix |
 | --- | --- |
@@ -2524,7 +2732,7 @@ The Styling demo loads Tailwind from its CDN, so it needs an internet connection
 | The date calendar never opens | The cell must be editable (`editable` on the grid or the column), then double-click it or press Enter / F2 |
 | A sequence column shows nothing or a type error | Give it `type: "sequence"` and a `field` that starts with `#`, for example `{ field: "#", type: "sequence" }` |
 | My custom row animation does nothing | `animateRows` is `false`, `virtualize` is on, or your class does not set `animation`. Check that the keyframes exist and that the class name is spelled the same in CSS |
-| PDF export fails with `needs the package "jspdf"` | Install the optional packages: `npm install jspdf jspdf-autotable` (and `html2canvas` for a header / footer element). Handle the error with `onExportError` |
+| PDF export fails with `needs the jspdf and jspdf-autotable libraries` | Install `jspdf jspdf-autotable` (and `html2canvas` for a header / footer element) and pass them in `exportable.pdf.libraries`. Handle the error with `onExportError` |
 | The PDF header / footer element has no image | The image must be loadable by the browser without being blocked: a bundled asset, a data URL, or a server that sends CORS headers |
 | The comparison drop-down does not show in the filter popup | Add `filterOperators: true` (or a list) to that column. It applies to text columns only, and not with a custom `filterRenderer` |
 | The wrong row animates out when I delete one | Give the grid `getRowId={(row) => row.id}`. Without it rows are identified by position |
@@ -2557,4 +2765,27 @@ The Styling demo loads Tailwind from its CDN, so it needs an internet connection
 | A checkbox in a boolean column is greyed out and won't toggle | The cell isn't editable. Set `editable` on the grid, or `editable: true` on that column |
 | Type error: `field` not assignable | `field` must be a key of your row type. Check the spelling, and that `ColumnDef<T>` uses the same `T` as `rows` |
 
----
+---
+### Changed defaults
+
+Three defaults changed so that every feature is opt-in.
+
+| Before | Now | What to do |
+| --- | --- | --- |
+| Grid prop `sortable` (default `true`), column `sortable` override | **Column** `sortable` only, default `false`. The grid-level prop is gone | Add `sortable: true` to each column that should sort. Remove `sortable` / `sortable={false}` from the grid |
+| `defaultSort` / `onSortChange` used one `SortModel` or `null` | `defaultSort` takes one `SortModel` **or an array**. `onSortChange` receives an **array** (empty when unsorted) | Change `(sort) => sort?.field` to `(sort) => sort[0]?.field` |
+| `searchable` default `true` | Default `false` | Add `searchable` to grids that should show the search box |
+| `pagination` default `true` | Default `false`. With it off there is no footer and no row count | Add `pagination` to grids that should page |
+| Filters were text only | Filter kinds: text, exact, number, date, select | Nothing to change. Number columns now get a Min / Max popup, boolean columns a checkbox list |
+| `FilterRendererProps` | Unchanged (`value: string`) | |
+
+A quick way to get the old behaviour everywhere:
+
+```tsx
+// before: <DataGrid columns={columns} rows={rows} />
+const withSorting = (cols: ColumnDef<Row>[]) => cols.map((c) => ({ sortable: true, ...c }));
+
+<DataGrid columns={withSorting(columns)} rows={rows} searchable pagination />
+```
+
+Everything else in this document is new and optional.

package/dist/client-40__X0_a.cjs

@@ -0,0 +1 @@
+"use strict";const y=require("react-dom");function f(t,e){for(var o=0;o<e.length;o++){const n=e[o];if(typeof n!="string"&&!Array.isArray(n)){for(const a in n)if(a!=="default"&&!(a in t)){const u=Object.getOwnPropertyDescriptor(n,a);u&&Object.defineProperty(t,a,u.get?u:{enumerable:!0,get:()=>n[a]})}}}return Object.freeze(Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}))}var r={},l,s,i=y;if(process.env.NODE_ENV==="production")s=r.createRoot=i.createRoot,l=r.hydrateRoot=i.hydrateRoot;else{var c=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;s=r.createRoot=function(t,e){c.usingClientEntryPoint=!0;try{return i.createRoot(t,e)}finally{c.usingClientEntryPoint=!1}},l=r.hydrateRoot=function(t,e,o){c.usingClientEntryPoint=!0;try{return i.hydrateRoot(t,e,o)}finally{c.usingClientEntryPoint=!1}}}const _=f({__proto__:null,get createRoot(){return s},default:r,get hydrateRoot(){return l}},[r]);exports.client=_;

package/dist/client-DUlru6F3.js

@@ -0,0 +1,51 @@
+import f from "react-dom";
+function s(t, e) {
+  for (var o = 0; o < e.length; o++) {
+    const n = e[o];
+    if (typeof n != "string" && !Array.isArray(n)) {
+      for (const a in n)
+        if (a !== "default" && !(a in t)) {
+          const u = Object.getOwnPropertyDescriptor(n, a);
+          u && Object.defineProperty(t, a, u.get ? u : {
+            enumerable: !0,
+            get: () => n[a]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
+}
+var r = {}, l, y, i = f;
+if (process.env.NODE_ENV === "production")
+  y = r.createRoot = i.createRoot, l = r.hydrateRoot = i.hydrateRoot;
+else {
+  var c = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  y = r.createRoot = function(t, e) {
+    c.usingClientEntryPoint = !0;
+    try {
+      return i.createRoot(t, e);
+    } finally {
+      c.usingClientEntryPoint = !1;
+    }
+  }, l = r.hydrateRoot = function(t, e, o) {
+    c.usingClientEntryPoint = !0;
+    try {
+      return i.hydrateRoot(t, e, o);
+    } finally {
+      c.usingClientEntryPoint = !1;
+    }
+  };
+}
+const R = /* @__PURE__ */ s({
+  __proto__: null,
+  get createRoot() {
+    return y;
+  },
+  default: r,
+  get hydrateRoot() {
+    return l;
+  }
+}, [r]);
+export {
+  R as c
+};