@nexgrid/react 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,12 +1,14 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { NexGridColumn, QueryState, Density, ExcelBadgeRule, NexGridLocale, ClientQueryOptions } from '@nexgrid/core';
-export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledSort } from '@nexgrid/core';
+import { TableXColumn, QueryState, Density, ExcelBadgeRule, TableXLocale, ClientQueryOptions } from '@nexgrid/core';
+export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, TableXCellContext, TableXColumn, TableXColumnMeta, TableXLocale, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledMultiSort, withToggledSort } from '@nexgrid/core';
 
 /** A column definition bound to React's render type. */
-type NexGridReactColumn<TData> = NexGridColumn<TData, ReactNode>;
-/** Severity of a {@link NexGridNotice}. */
-type NexGridNoticeType = "info" | "success" | "error";
+type TableXReactColumn<TData> = TableXColumn<TData, ReactNode>;
+type NexGridReactColumn<TData> = TableXReactColumn<TData>;
+/** Severity of a {@link TableXNotice}. */
+type TableXNoticeType = "info" | "success" | "error";
+type NexGridNoticeType = TableXNoticeType;
 /**
  * A message the grid wants surfaced to the user.
  *
@@ -14,23 +16,25 @@ type NexGridNoticeType = "info" | "success" | "error";
  * design system, and two competing toast stacks in one page is a worse bug
  * than no toast at all. Everything it would want to say arrives here instead.
  */
-interface NexGridNotice {
-    type: NexGridNoticeType;
+interface TableXNotice {
+    type: TableXNoticeType;
     message: string;
 }
+type NexGridNotice = TableXNotice;
 /** Color scheme applied to the grid root. */
-type NexGridTheme = "light" | "dark" | "auto";
+type TableXTheme = "light" | "dark" | "auto";
+type NexGridTheme = TableXTheme;
 /**
- * Props for {@link NexGrid}.
+ * Props for {@link TableX}.
  *
  * `data` / `total` / `query` / `onQueryChange` are **controlled**: the grid
  * renders exactly the page it is handed and reports intent back through
  * `onQueryChange`. It never fetches on its own (the one exception is the
  * export-everything path, which needs rows the current page does not have).
  */
-interface NexGridProps<TData> {
+interface TableXProps<TData> {
     /** Column definitions, in display order. */
-    columns: NexGridReactColumn<TData>[];
+    columns: TableXReactColumn<TData>[];
     /** The CURRENT page of rows only — never the full dataset. */
     data: TData[];
     /** Total filtered row count from the server; drives the pager. */
@@ -51,6 +55,12 @@ interface NexGridProps<TData> {
     onRetry?: () => void;
     /** Render selection checkboxes. Default `false`. */
     enableSelection?: boolean;
+    /** Selection mode: `"multi"` (default) or `"single"`. */
+    selectionMode?: "multi" | "single";
+    /** Enable column-level filter menus on column headers. Default `false` (or per-column). */
+    enableColumnFilters?: boolean;
+    /** Enable dragging column borders to resize columns. Default `true`. */
+    enableColumnResize?: boolean;
     /**
      * Called with every selected row id after each change.
      * `allAcrossSelected` is reserved for a future "select all matching rows"
@@ -61,6 +71,55 @@ interface NexGridProps<TData> {
     enableSearch?: boolean;
     /** Overrides `locale.searchPlaceholder`. */
     searchPlaceholder?: string;
+    /** Show the columns toggle dropdown menu button. Default `true`. */
+    enableColumns?: boolean;
+    /** Alias for enableColumns. */
+    showColumnsButton?: boolean;
+    /** Show the density dropdown menu button. Default `true`. */
+    enableDensity?: boolean;
+    /** Alias for enableDensity. */
+    showDensityButton?: boolean;
+    /** Show the export menu. Default `true`. */
+    enableExport?: boolean;
+    /** Alias for enableExport. */
+    showExportButton?: boolean;
+    /** Enable sorting across all columns. Default `true`. */
+    enableSorting?: boolean;
+    /** Show the footer pagination controls. Default `true`. */
+    enablePagination?: boolean;
+    /** Alias for enablePagination. */
+    showPagination?: boolean;
+    /** Show the rows-per-page dropdown in the footer. Default `true`. */
+    enableRowsPerPage?: boolean;
+    /** Alias for enableRowsPerPage. */
+    showRowsPerPage?: boolean;
+    /** Show the jump to page input in the footer. Default `true`. */
+    enableJumpToPage?: boolean;
+    /** Alias for enableJumpToPage. */
+    showJumpToPage?: boolean;
+    /** Show the entire toolbar area. Default `true`. */
+    showToolbar?: boolean;
+    /** Show the entire footer area. Default `true`. */
+    showFooter?: boolean;
+    /** Custom renderer for expanded accordion sub-rows. */
+    renderExpandedRow?: (row: TData) => ReactNode;
+    /** Enable floating bulk actions bar when rows are selected. Default `true`. */
+    enableBulkActions?: boolean;
+    /** Custom bulk actions renderer receiving selected IDs. */
+    bulkActions?: (selectedIds: string[], deselectAll: () => void) => ReactNode;
+    /** Enable summary / aggregation footer row. Default auto (true if any column defines meta.aggregation). */
+    enableSummaryRow?: boolean;
+    /** Enable drag-and-drop column header reordering. Default `false`. */
+    enableColumnReorder?: boolean;
+    /** Called when column order changes via drag-and-drop reordering. */
+    onColumnOrderChange?: (newOrder: string[]) => void;
+    /** Called when a cell's value is committed via inline cell editing. */
+    onCellEdit?: (edit: {
+        row: TData;
+        columnId: string;
+        oldValue: unknown;
+        newValue: unknown;
+    }) => void;
     /** Rendered at the end of the toolbar, after the export menu. */
     toolbarActions?: ReactNode;
     /** Clicking a row (or a card) invokes this. Adds a pointer cursor. */
@@ -71,26 +130,27 @@ interface NexGridProps<TData> {
     className?: string;
     /** Show the automatic `S.No.` column. Default `true`. */
     showSerialNumber?: boolean;
-    /** Show the export menu. Default `true`. */
-    enableExport?: boolean;
     /** File name prefix, without extension. Default: the caption, lower-cased and underscored. */
     exportFileName?: string;
     /** Take over exporting entirely; when set, the grid's own export flow never runs. */
     onExportAll?: () => void | Promise<void>;
     /**
-     * List endpoint used to page in the rest of the dataset when exporting more
-     * than the current page. Without it, exports contain the visible page only.
+     * Endpoint used to fetch the full filtered dataset for export when the current
+     * page is only part of it.
      */
     fetchEndpoint?: string;
-    /** Value-based cell styling for the Excel export. Defaults to core's `DEFAULT_BADGE_RULES`. */
+    /** Extra fetch options (headers, etc.) forwarded when calling {@link fetchEndpoint}. */
+    fetchOptions?: RequestInit;
+    /** Value-based badge styling rules for Excel export. */
     badgeRules?: readonly ExcelBadgeRule[];
-    /** Overrides for any user-facing string. */
-    locale?: Partial<NexGridLocale>;
-    /** Receives messages the grid would otherwise have no way to report. Default: no-op. */
-    onNotify?: (notice: NexGridNotice) => void;
-    /** `"dark"` and `"auto"` add `.nxg-dark` / `.nxg-auto` to the root. Default `"light"`. */
-    theme?: NexGridTheme;
+    /** Overrides for any user-facing string in the grid. */
+    locale?: Partial<TableXLocale>;
+    /** Visual theme. Default `"light"`. */
+    theme?: TableXTheme;
+    /** Receives notices (export progress, failures). Default: no-op. */
+    onNotify?: (notice: TableXNotice) => void;
 }
+type NexGridProps<TData> = TableXProps<TData>;
 
 /**
  * A server-driven data grid: search, sorting, column visibility, density,
@@ -98,7 +158,7 @@ interface NexGridProps<TData> {
  *
  * `data`, `total`, `query` and `onQueryChange` are controlled by the host — the
  * grid renders the page it is given and never fetches on its own (the one
- * exception being {@link NexGridProps.fetchEndpoint}, used to page in the rest
+ * exception being {@link TableXProps.fetchEndpoint}, used to page in the rest
  * of the dataset for an export).
  *
  * @example
@@ -114,13 +174,15 @@ interface NexGridProps<TData> {
  * />
  * ```
  */
-declare function NexGrid<TData>({ columns, data, total, query, onQueryChange, caption, density: initialDensity, isLoading, error, onRetry, enableSelection, onSelectionChange, enableSearch, searchPlaceholder, toolbarActions, onRowClick, getRowId, className, showSerialNumber, enableExport, exportFileName, onExportAll, fetchEndpoint, badgeRules, locale: localeOverrides, onNotify, theme, }: NexGridProps<TData>): react.JSX.Element;
+declare function TableX<TData>(props: TableXProps<TData>): react.JSX.Element;
+declare const NexGrid: typeof TableX;
 
-/** Options for {@link useClientNexGrid}. */
-interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
+/** Options for {@link useClientTableX}. */
+interface UseClientTableXOptions<TData> extends ClientQueryOptions<TData> {
     /** Optional initial query state overrides. */
     initialQuery?: Partial<QueryState>;
 }
+type UseClientNexGridOptions<TData> = UseClientTableXOptions<TData>;
 /**
  * React hook for effortless in-memory client-side grid operations.
  *
@@ -130,10 +192,10 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
  * @example
  * ```tsx
  * export function StudentsGrid({ allStudents }: { allStudents: Student[] }) {
- *   const grid = useClientNexGrid(allStudents);
+ *   const grid = useClientTableX(allStudents);
  *
  *   return (
- *     <NexGrid
+ *     <TableX
  *       caption="Students"
  *       columns={columns}
  *       {...grid}
@@ -142,7 +204,7 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
  * }
  * ```
  */
-declare function useClientNexGrid<TData>(allData: readonly TData[], options?: UseClientNexGridOptions<TData>): {
+declare function useClientTableX<TData>(allData: readonly TData[], options?: UseClientTableXOptions<TData>): {
     data: TData[];
     total: number;
     query: QueryState;
@@ -152,5 +214,6 @@ declare function useClientNexGrid<TData>(allData: readonly TData[], options?: Us
     totalPages: number;
     setQuery: react.Dispatch<react.SetStateAction<QueryState>>;
 };
+declare const useClientNexGrid: typeof useClientTableX;
 
-export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, type UseClientNexGridOptions, useClientNexGrid };
+export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, TableX, type TableXNotice, type TableXNoticeType, type TableXProps, type TableXReactColumn, type TableXTheme, type UseClientNexGridOptions, type UseClientTableXOptions, useClientNexGrid, useClientTableX };

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { NexGridColumn, QueryState, Density, ExcelBadgeRule, NexGridLocale, ClientQueryOptions } from '@nexgrid/core';
-export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledSort } from '@nexgrid/core';
+import { TableXColumn, QueryState, Density, ExcelBadgeRule, TableXLocale, ClientQueryOptions } from '@nexgrid/core';
+export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, TableXCellContext, TableXColumn, TableXColumnMeta, TableXLocale, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledMultiSort, withToggledSort } from '@nexgrid/core';
 
 /** A column definition bound to React's render type. */
-type NexGridReactColumn<TData> = NexGridColumn<TData, ReactNode>;
-/** Severity of a {@link NexGridNotice}. */
-type NexGridNoticeType = "info" | "success" | "error";
+type TableXReactColumn<TData> = TableXColumn<TData, ReactNode>;
+type NexGridReactColumn<TData> = TableXReactColumn<TData>;
+/** Severity of a {@link TableXNotice}. */
+type TableXNoticeType = "info" | "success" | "error";
+type NexGridNoticeType = TableXNoticeType;
 /**
  * A message the grid wants surfaced to the user.
  *
@@ -14,23 +16,25 @@ type NexGridNoticeType = "info" | "success" | "error";
  * design system, and two competing toast stacks in one page is a worse bug
  * than no toast at all. Everything it would want to say arrives here instead.
  */
-interface NexGridNotice {
-    type: NexGridNoticeType;
+interface TableXNotice {
+    type: TableXNoticeType;
     message: string;
 }
+type NexGridNotice = TableXNotice;
 /** Color scheme applied to the grid root. */
-type NexGridTheme = "light" | "dark" | "auto";
+type TableXTheme = "light" | "dark" | "auto";
+type NexGridTheme = TableXTheme;
 /**
- * Props for {@link NexGrid}.
+ * Props for {@link TableX}.
  *
  * `data` / `total` / `query` / `onQueryChange` are **controlled**: the grid
  * renders exactly the page it is handed and reports intent back through
  * `onQueryChange`. It never fetches on its own (the one exception is the
  * export-everything path, which needs rows the current page does not have).
  */
-interface NexGridProps<TData> {
+interface TableXProps<TData> {
     /** Column definitions, in display order. */
-    columns: NexGridReactColumn<TData>[];
+    columns: TableXReactColumn<TData>[];
     /** The CURRENT page of rows only — never the full dataset. */
     data: TData[];
     /** Total filtered row count from the server; drives the pager. */
@@ -51,6 +55,12 @@ interface NexGridProps<TData> {
     onRetry?: () => void;
     /** Render selection checkboxes. Default `false`. */
     enableSelection?: boolean;
+    /** Selection mode: `"multi"` (default) or `"single"`. */
+    selectionMode?: "multi" | "single";
+    /** Enable column-level filter menus on column headers. Default `false` (or per-column). */
+    enableColumnFilters?: boolean;
+    /** Enable dragging column borders to resize columns. Default `true`. */
+    enableColumnResize?: boolean;
     /**
      * Called with every selected row id after each change.
      * `allAcrossSelected` is reserved for a future "select all matching rows"
@@ -61,6 +71,55 @@ interface NexGridProps<TData> {
     enableSearch?: boolean;
     /** Overrides `locale.searchPlaceholder`. */
     searchPlaceholder?: string;
+    /** Show the columns toggle dropdown menu button. Default `true`. */
+    enableColumns?: boolean;
+    /** Alias for enableColumns. */
+    showColumnsButton?: boolean;
+    /** Show the density dropdown menu button. Default `true`. */
+    enableDensity?: boolean;
+    /** Alias for enableDensity. */
+    showDensityButton?: boolean;
+    /** Show the export menu. Default `true`. */
+    enableExport?: boolean;
+    /** Alias for enableExport. */
+    showExportButton?: boolean;
+    /** Enable sorting across all columns. Default `true`. */
+    enableSorting?: boolean;
+    /** Show the footer pagination controls. Default `true`. */
+    enablePagination?: boolean;
+    /** Alias for enablePagination. */
+    showPagination?: boolean;
+    /** Show the rows-per-page dropdown in the footer. Default `true`. */
+    enableRowsPerPage?: boolean;
+    /** Alias for enableRowsPerPage. */
+    showRowsPerPage?: boolean;
+    /** Show the jump to page input in the footer. Default `true`. */
+    enableJumpToPage?: boolean;
+    /** Alias for enableJumpToPage. */
+    showJumpToPage?: boolean;
+    /** Show the entire toolbar area. Default `true`. */
+    showToolbar?: boolean;
+    /** Show the entire footer area. Default `true`. */
+    showFooter?: boolean;
+    /** Custom renderer for expanded accordion sub-rows. */
+    renderExpandedRow?: (row: TData) => ReactNode;
+    /** Enable floating bulk actions bar when rows are selected. Default `true`. */
+    enableBulkActions?: boolean;
+    /** Custom bulk actions renderer receiving selected IDs. */
+    bulkActions?: (selectedIds: string[], deselectAll: () => void) => ReactNode;
+    /** Enable summary / aggregation footer row. Default auto (true if any column defines meta.aggregation). */
+    enableSummaryRow?: boolean;
+    /** Enable drag-and-drop column header reordering. Default `false`. */
+    enableColumnReorder?: boolean;
+    /** Called when column order changes via drag-and-drop reordering. */
+    onColumnOrderChange?: (newOrder: string[]) => void;
+    /** Called when a cell's value is committed via inline cell editing. */
+    onCellEdit?: (edit: {
+        row: TData;
+        columnId: string;
+        oldValue: unknown;
+        newValue: unknown;
+    }) => void;
     /** Rendered at the end of the toolbar, after the export menu. */
     toolbarActions?: ReactNode;
     /** Clicking a row (or a card) invokes this. Adds a pointer cursor. */
@@ -71,26 +130,27 @@ interface NexGridProps<TData> {
     className?: string;
     /** Show the automatic `S.No.` column. Default `true`. */
     showSerialNumber?: boolean;
-    /** Show the export menu. Default `true`. */
-    enableExport?: boolean;
     /** File name prefix, without extension. Default: the caption, lower-cased and underscored. */
     exportFileName?: string;
     /** Take over exporting entirely; when set, the grid's own export flow never runs. */
     onExportAll?: () => void | Promise<void>;
     /**
-     * List endpoint used to page in the rest of the dataset when exporting more
-     * than the current page. Without it, exports contain the visible page only.
+     * Endpoint used to fetch the full filtered dataset for export when the current
+     * page is only part of it.
      */
     fetchEndpoint?: string;
-    /** Value-based cell styling for the Excel export. Defaults to core's `DEFAULT_BADGE_RULES`. */
+    /** Extra fetch options (headers, etc.) forwarded when calling {@link fetchEndpoint}. */
+    fetchOptions?: RequestInit;
+    /** Value-based badge styling rules for Excel export. */
     badgeRules?: readonly ExcelBadgeRule[];
-    /** Overrides for any user-facing string. */
-    locale?: Partial<NexGridLocale>;
-    /** Receives messages the grid would otherwise have no way to report. Default: no-op. */
-    onNotify?: (notice: NexGridNotice) => void;
-    /** `"dark"` and `"auto"` add `.nxg-dark` / `.nxg-auto` to the root. Default `"light"`. */
-    theme?: NexGridTheme;
+    /** Overrides for any user-facing string in the grid. */
+    locale?: Partial<TableXLocale>;
+    /** Visual theme. Default `"light"`. */
+    theme?: TableXTheme;
+    /** Receives notices (export progress, failures). Default: no-op. */
+    onNotify?: (notice: TableXNotice) => void;
 }
+type NexGridProps<TData> = TableXProps<TData>;
 
 /**
  * A server-driven data grid: search, sorting, column visibility, density,
@@ -98,7 +158,7 @@ interface NexGridProps<TData> {
  *
  * `data`, `total`, `query` and `onQueryChange` are controlled by the host — the
  * grid renders the page it is given and never fetches on its own (the one
- * exception being {@link NexGridProps.fetchEndpoint}, used to page in the rest
+ * exception being {@link TableXProps.fetchEndpoint}, used to page in the rest
  * of the dataset for an export).
  *
  * @example
@@ -114,13 +174,15 @@ interface NexGridProps<TData> {
  * />
  * ```
  */
-declare function NexGrid<TData>({ columns, data, total, query, onQueryChange, caption, density: initialDensity, isLoading, error, onRetry, enableSelection, onSelectionChange, enableSearch, searchPlaceholder, toolbarActions, onRowClick, getRowId, className, showSerialNumber, enableExport, exportFileName, onExportAll, fetchEndpoint, badgeRules, locale: localeOverrides, onNotify, theme, }: NexGridProps<TData>): react.JSX.Element;
+declare function TableX<TData>(props: TableXProps<TData>): react.JSX.Element;
+declare const NexGrid: typeof TableX;
 
-/** Options for {@link useClientNexGrid}. */
-interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
+/** Options for {@link useClientTableX}. */
+interface UseClientTableXOptions<TData> extends ClientQueryOptions<TData> {
     /** Optional initial query state overrides. */
     initialQuery?: Partial<QueryState>;
 }
+type UseClientNexGridOptions<TData> = UseClientTableXOptions<TData>;
 /**
  * React hook for effortless in-memory client-side grid operations.
  *
@@ -130,10 +192,10 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
  * @example
  * ```tsx
  * export function StudentsGrid({ allStudents }: { allStudents: Student[] }) {
- *   const grid = useClientNexGrid(allStudents);
+ *   const grid = useClientTableX(allStudents);
  *
  *   return (
- *     <NexGrid
+ *     <TableX
  *       caption="Students"
  *       columns={columns}
  *       {...grid}
@@ -142,7 +204,7 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
  * }
  * ```
  */
-declare function useClientNexGrid<TData>(allData: readonly TData[], options?: UseClientNexGridOptions<TData>): {
+declare function useClientTableX<TData>(allData: readonly TData[], options?: UseClientTableXOptions<TData>): {
     data: TData[];
     total: number;
     query: QueryState;
@@ -152,5 +214,6 @@ declare function useClientNexGrid<TData>(allData: readonly TData[], options?: Us
     totalPages: number;
     setQuery: react.Dispatch<react.SetStateAction<QueryState>>;
 };
+declare const useClientNexGrid: typeof useClientTableX;
 
-export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, type UseClientNexGridOptions, useClientNexGrid };
+export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, TableX, type TableXNotice, type TableXNoticeType, type TableXProps, type TableXReactColumn, type TableXTheme, type UseClientNexGridOptions, type UseClientTableXOptions, useClientNexGrid, useClientTableX };