@nexgrid/react 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 A server-driven data grid for React and Next.js.
 
-NexGrid renders one page of rows at a time and never holds the dataset. Every
+TableX renders one page of rows at a time and never holds the dataset. Every
 piece of user intent — page, page size, sort, search, filters — is expressed as
 a single `QueryState` object that **you** own; the grid hands you the next one
 and re-renders when you hand back the matching page. That is the whole contract.
@@ -21,6 +21,10 @@ identical on every platform.
 - Ships ESM and CJS, with a `"use client"` banner so it drops straight into the
   Next.js App Router.
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ChhaganSinha/NexGrid/master/docs/assets/tablex-preview.png" alt="TableX React Data Grid Preview" width="100%" />
+</p>
+
 ## Installation
 
 ```bash
@@ -43,10 +47,10 @@ changes, and pass the result straight through.
 
 import { useCallback, useEffect, useState } from "react";
 import {
-  NexGrid,
+  TableX,
   defaultQuery,
   serializeQuery,
-  type NexGridReactColumn,
+  type TableXReactColumn,
   type PagedResponse,
   type QueryState,
 } from "@nexgrid/react";
@@ -60,7 +64,7 @@ interface Student {
   joinedAt: string;
 }
 
-const columns: NexGridReactColumn<Student>[] = [
+const columns: TableXReactColumn<Student>[] = [
   { accessorKey: "name", header: "Name", meta: { minWidth: 180 } },
   { accessorKey: "email", header: "Email" },
   {
@@ -105,7 +109,7 @@ export function StudentsGrid() {
   }, [load, query]);
 
   return (
-    <NexGrid
+    <TableX
       caption="Students"
       columns={columns}
       data={page?.items ?? []}
@@ -132,7 +136,7 @@ Your endpoint must answer with a `PagedResponse<T>`:
 { "items": [], "page": 1, "pageSize": 10, "total": 0, "totalPages": 1 }
 ```
 
-If your API is ASP.NET Core, `NexGrid.AspNetCore` binds exactly the query string
+If your API is ASP.NET Core, `TableX.AspNetCore` binds exactly the query string
 `serializeQuery` produces and returns exactly this shape.
 
 ### Putting the query in the URL
@@ -145,7 +149,7 @@ const searchParams = useSearchParams();
 const router = useRouter();
 const query = useMemo(() => parseQuery(searchParams.toString()), [searchParams]);
 
-<NexGrid
+<TableX
   query={query}
   onQueryChange={(next) => router.replace(`?${serializeQuery(next)}`)}
   {...rest}
@@ -158,7 +162,7 @@ never put the grid into an impossible state.
 
 ## Next.js App Router
 
-The published bundle starts with `"use client"`, so `<NexGrid />` can be imported
+The published bundle starts with `"use client"`, so `<TableX />` can be imported
 directly from a Server Component without a wrapper:
 
 ```tsx
@@ -182,7 +186,7 @@ Two notes:
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `columns` | `NexGridReactColumn<TData>[]` | required | Column definitions, in display order. |
+| `columns` | `TableXReactColumn<TData>[]` | required | Column definitions, in display order. |
 | `data` | `TData[]` | required | The **current page** of rows only. |
 | `total` | `number` | required | Total filtered row count from the server. Drives the pager. |
 | `query` | `QueryState` | required | The query the `data` above answers. |
@@ -206,9 +210,9 @@ Two notes:
 | `onExportAll` | `() => void \| Promise<void>` | — | Takes over exporting entirely; the built-in flow never runs. |
 | `fetchEndpoint` | `string` | — | List endpoint used to page in the rest of the dataset when exporting. |
 | `badgeRules` | `readonly ExcelBadgeRule[]` | core's `DEFAULT_BADGE_RULES` | Value-based cell styling for the Excel export. |
-| `locale` | `Partial<NexGridLocale>` | English defaults | Overrides for any user-facing string. |
-| `onNotify` | `(notice: NexGridNotice) => void` | no-op | Receives `{ type, message }` for export progress, failures, and successes. |
-| `theme` | `"light" \| "dark" \| "auto"` | `"light"` | Adds `.nxg-dark` / `.nxg-auto` to the root. |
+| `locale` | `Partial<TableXLocale>` | English defaults | Overrides for any user-facing string. |
+| `onNotify` | `(notice: TableXNotice) => void` | no-op | Receives `{ type, message }` for export progress, failures, and successes. |
+| `theme` | `"light" \| "dark" \| "auto"` | `"light"` | Adds `.tbx-dark` / `.tbx-auto` to the root. |
 
 ## Column definitions
 
@@ -222,7 +226,7 @@ A column is a plain object, structurally compatible with TanStack Table's
 | `header` | `string \| (ctx) => ReactNode` | Header content. A string is also used for menus and export headers. |
 | `cell` | `(ctx: { row: { original: TData }, getValue(): unknown }) => ReactNode` | Custom cell renderer. Without it the raw value is rendered as text. |
 | `enableSorting` | `boolean` | Sorting is on by default; set `false` to opt out. |
-| `meta` | `NexGridColumnMeta` | Layout and behavior hints — see below. |
+| `meta` | `TableXColumnMeta` | Layout and behavior hints — see below. |
 
 ### `meta`
 
@@ -245,7 +249,7 @@ hideable, and never exported.
 the mobile card list, so the two can never drift apart.
 
 ```tsx
-const columns: NexGridReactColumn<Student>[] = [
+const columns: TableXReactColumn<Student>[] = [
   // A status pill.
   {
     accessorKey: "status",
@@ -298,38 +302,38 @@ Every color and shape in the stylesheet reads a CSS custom property, so you
 re-skin the grid by overriding tokens — no class overrides, no `!important`.
 
 ```css
-.nxg-root {
-  --nxg-primary: #7c3aed;
-  --nxg-primary-fg: #ffffff;
-  --nxg-radius: 8px;
-  --nxg-font: "Inter", system-ui, sans-serif;
+.tbx-root {
+  --tbx-primary: #7c3aed;
+  --tbx-primary-fg: #ffffff;
+  --tbx-radius: 8px;
+  --tbx-font: "Inter", system-ui, sans-serif;
 }
 ```
 
 | Token | Purpose |
 |-------|---------|
-| `--nxg-font`, `--nxg-font-mono` | Body font, and the serial-number font. |
-| `--nxg-bg` | Input and pager background. |
-| `--nxg-card`, `--nxg-card-2` | Panel background, and the table header band. |
-| `--nxg-border` | Every border and divider. |
-| `--nxg-fg`, `--nxg-muted-fg` | Primary and secondary text. |
-| `--nxg-muted` | Hover fills and subtle chips. |
-| `--nxg-primary`, `--nxg-primary-fg` | Accent: sort icons, current page, selection. |
-| `--nxg-danger` | Destructive accents. |
-| `--nxg-radius`, `--nxg-radius-sm` | Panel and control corner radii. |
-| `--nxg-shadow`, `--nxg-focus-ring` | Elevation, and the focus ring. |
+| `--tbx-font`, `--tbx-font-mono` | Body font, and the serial-number font. |
+| `--tbx-bg` | Input and pager background. |
+| `--tbx-card`, `--tbx-card-2` | Panel background, and the table header band. |
+| `--tbx-border` | Every border and divider. |
+| `--tbx-fg`, `--tbx-muted-fg` | Primary and secondary text. |
+| `--tbx-muted` | Hover fills and subtle chips. |
+| `--tbx-primary`, `--tbx-primary-fg` | Accent: sort icons, current page, selection. |
+| `--tbx-danger` | Destructive accents. |
+| `--tbx-radius`, `--tbx-radius-sm` | Panel and control corner radii. |
+| `--tbx-shadow`, `--tbx-focus-ring` | Elevation, and the focus ring. |
 
 Dark mode is a class, not a media query, so it can follow whatever your app
 already uses:
 
 ```tsx
-<NexGrid theme="dark" {...props} />   {/* always dark          */}
-<NexGrid theme="auto" {...props} />   {/* follows the OS       */}
+<TableX theme="dark" {...props} />   {/* always dark          */}
+<TableX theme="auto" {...props} />   {/* follows the OS       */}
 ```
 
-`theme="dark"` puts `.nxg-dark` on the grid root. If your app already toggles a
-dark class higher up the tree, add `nxg-dark` alongside it and leave `theme`
-alone — the stylesheet matches `.nxg-dark .nxg-root` as well.
+`theme="dark"` puts `.tbx-dark` on the grid root. If your app already toggles a
+dark class higher up the tree, add `tbx-dark` alongside it and leave `theme`
+alone — the stylesheet matches `.tbx-dark .tbx-root` as well.
 
 Responsive behavior is driven entirely by the stylesheet: the grid renders both a
 table and a card list, and CSS shows the table at ≥ 768px and the cards below it.
@@ -348,7 +352,7 @@ If those requests fail it notifies you and falls back to the current page rather
 than producing nothing.
 
 ```tsx
-<NexGrid
+<TableX
   fetchEndpoint="/api/students"
   exportFileName="student_roster"
   badgeRules={[
@@ -375,7 +379,7 @@ is `"info" | "success" | "error"`, ready to forward to whatever you already use.
 Every user-facing string comes from a locale object. Override any subset:
 
 ```tsx
-<NexGrid
+<TableX
   locale={{
     searchPlaceholder: "Rechercher…",
     emptyText: "Aucun enregistrement ne correspond à votre recherche.",
@@ -428,5 +432,5 @@ one and that the sort cycle stays `asc → desc → cleared` across every adapte
 
 ## License
 
-[MIT](https://github.com/ChhaganSinha/NexGrid/blob/main/LICENSE) © 2026 Chhagan Sinha
+[MIT](https://github.com/ChhaganSinha/TableX/blob/main/LICENSE) © 2026 Chhagan Sinha