@uxf/data-grid 11.93.3 → 11.94.0

package/README.md

@@ -65,6 +65,27 @@ const { state, actions } = useDataGridControl({
 useUserConfig(actions);
 ```
 
+## Row type
+
+Create a `column-types.d.ts` file in your project and add the following:
+
+```tsx
+declare module "@uxf/data-grid/column-types" {
+    export interface ColumnTypes {
+        "my-custom-type": MyCustomType;
+    }
+}
+```
+
+Then you can use it in your code:
+
+```tsx
+import { InferDataGridRow } from "@uxf/data-grid";
+import { schema } from "@generated/data-grid/schema/example";
+
+type Row = InferDataGridRow<typeof schema>;
+```
+
 ## Supported FilterHandlers
 
 - `bool` - Select (yes / no / null)

package/_generator/index.js

@@ -31,7 +31,11 @@ function generateRowType(gridName, schema, columnTypes) {
         return "";
     }
 
-    return `export type DataGridRow_${camelize(gridName)} = {
+    return `/**
+ * @deprecated
+ * Use: \`InferDataGridRow<typeof schema>;\`
+ */
+export type DataGridRow_${camelize(gridName)} = {
     ${schema.columns.map((column) => `"${column.name}": ColumnTypes["${column.type}"]`).join("\n    ")}
 }`;
 }

package/column-types.d.ts

@@ -0,0 +1,25 @@
+import { DateString, DatetimeString } from "@uxf/core/date";
+import { Money } from "@uxf/core/money";
+export interface ColumnTypes {
+    bool: boolean | null;
+    chip: {
+        id: string | number;
+        label: string;
+        color?: string;
+    } | null;
+    chips: Array<{
+        id: string | number;
+        label: string;
+        color?: string;
+    }>;
+    date: DateString | null;
+    datetime: DatetimeString | null;
+    email: string | null;
+    id: number;
+    int: number | null;
+    money: Money | null;
+    phone: string | null;
+    string: string | null;
+    url: string | null;
+    uuid: string;
+}

package/column-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/data-grid-v2.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { BaseGridType, DataGridProps } from "./types";
-export declare function DataGridV2<GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>): React.JSX.Element;
+export declare function DataGridV2<GridType extends BaseGridType>(props: DataGridProps<GridType>): React.JSX.Element;

package/data-grid.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { BaseGridType, DataGridProps } from "./types";
-export declare function DataGrid<GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>): React.JSX.Element;
+export declare function DataGrid<GridType extends BaseGridType>(props: DataGridProps<GridType>): React.JSX.Element;

package/hidden-columns/types.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
 import { Column, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
-export type ColumnWithId = Column<any, any> & {
+export type ColumnWithId = Column & {
     id: string;
 };
 export type SectionKey = "visible" | "hidden";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.93.3",
+    "version": "11.94.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -38,7 +38,7 @@
         "@dnd-kit/sortable": "10.0.0",
         "@uxf/core": "11.93.0",
         "@uxf/core-react": "11.93.0",
-        "@uxf/ui": "11.93.3",
+        "@uxf/ui": "11.94.0",
         "dayjs": "1.11.19",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.3",

package/table-v2/components/cell.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Column } from "../../types";
 interface CellProps {
-    column: Column<any, any>;
+    column: Column;
     children: ReactNode;
 }
 export declare function Cell(props: CellProps): React.JSX.Element;

package/table-v2/components/header-cell.d.ts

@@ -2,7 +2,7 @@ import { Nullish } from "@uxf/core/types";
 import React from "react";
 import { Column, DataGridSort } from "../../types";
 export interface HeaderCellProps {
-    column: Column<any, any>;
+    column: Column;
     onResizeStart: () => void;
     onAutoSize?: () => void;
     sort: DataGridSort | Nullish;

package/table-v2/components/header-select-all-rows-checkbox.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { KeyExtractor } from "../../types";
+import { BaseGridType, KeyExtractor } from "../../types";
 import { DataGridTableProps } from "../types";
-interface SelectRowCheckboxProps extends Pick<DataGridTableProps<any>, "state" | "data" | "actions" | "isRowSelectDisabled"> {
+interface SelectRowCheckboxProps<GridType extends BaseGridType> extends Pick<DataGridTableProps<GridType>, "state" | "data" | "actions" | "isRowSelectDisabled"> {
     keyExtractor: KeyExtractor;
 }
-export declare function HeaderSelectAllRowsCheckbox(props: SelectRowCheckboxProps): React.JSX.Element;
+export declare function HeaderSelectAllRowsCheckbox<GridType extends BaseGridType>(props: SelectRowCheckboxProps<GridType>): React.JSX.Element;
 export {};

package/table-v2/hooks/use-resizable-columns.d.ts

@@ -1,8 +1,8 @@
 import { Nullish } from "@uxf/core/types";
-import { Column } from "../../types";
+import { BaseGridType, Column } from "../../types";
 import { DataGridControl } from "../../use-data-grid-control";
 import { DataGridTableProps } from "../types";
-export declare function useResizableColumns(columns: Column<any, any>[], actionCell: DataGridTableProps<any>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish): {
+export declare function useResizableColumns<GridType extends BaseGridType>(columns: Column[], actionCell: DataGridTableProps<GridType>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish): {
     tableRef: import("react").RefObject<HTMLDivElement>;
     columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     onResizeStart(index: number): void;

package/table-v2/table-v2.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import { BaseGridType } from "../types";
 import { DataGridTableProps } from "./types";
-export declare function DataGridTableV2(props: DataGridTableProps<any>): React.JSX.Element;
+export declare function DataGridTableV2<GridType extends BaseGridType>(props: DataGridTableProps<GridType>): React.JSX.Element;

package/table-v2/types.d.ts

@@ -1,24 +1,24 @@
 import { Nullish } from "@uxf/core/types";
-import { ActionCellComponent, BodyCellComponents, KeyExtractor, RowAccent, Schema } from "../types";
+import { ActionCellComponent, BaseGridType, BodyCellComponents, InferDataGridRow, KeyExtractor, RowAccent, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
-export interface DataGridTableProps<Row> extends DataGridControl {
-    schema: Schema<any>;
-    data: Row[];
+export interface DataGridTableProps<GridType extends BaseGridType> extends DataGridControl {
+    schema: Schema<GridType>;
+    data: any[];
     isLoading?: boolean;
-    error?: any | Nullish;
+    error?: unknown | Nullish;
     reload: () => Promise<any>;
-    rowHeight?: number | ((row: Row) => number) | "auto";
+    rowHeight?: number | ((row: InferDataGridRow<Schema<GridType>>) => number) | "auto";
     headerRowHeight?: number;
-    rowAccent?: (row: Row) => RowAccent;
-    rowClassName?: (row: Row) => string | Nullish;
+    rowAccent?: (row: InferDataGridRow<Schema<GridType>>) => RowAccent;
+    rowClassName?: (row: InferDataGridRow<Schema<GridType>>) => string | Nullish;
     keyExtractor?: KeyExtractor;
     bodyCells?: BodyCellComponents;
     actionCell?: {
         width: number;
-        Component: ActionCellComponent<Row>;
+        Component: ActionCellComponent<InferDataGridRow<Schema<GridType>>>;
     };
     NoRowsFallback?: NoRowsFallbackComponent;
-    isRowSelectDisabled?: (row: Row) => boolean;
+    isRowSelectDisabled?: (row: InferDataGridRow<Schema<GridType>>) => boolean;
     isRowsSelectable?: boolean;
 }

package/table-v2/utils/get-grid-template-rows.d.ts

@@ -1,2 +1,3 @@
+import { BaseGridType } from "../../types";
 import { DataGridTableProps } from "../types";
-export declare function getGridTemplateRows(rows: any[], headerRowHeight: number, rowHeight: DataGridTableProps<any>["rowHeight"]): string | undefined;
+export declare function getGridTemplateRows<GridType extends BaseGridType>(rows: any[], headerRowHeight: number, rowHeight: DataGridTableProps<GridType>["rowHeight"]): string | undefined;

package/types/components.d.ts

@@ -11,7 +11,7 @@ export type DataGridActionCell<Row> = {
 };
 export interface BodyCellProps<Value> {
     value: Value;
-    column: Column<any, any>;
+    column: Column;
     /** @deprecated will be removed */
     row: any;
     reload: () => Promise<any>;

package/types/data-grid-props.d.ts

@@ -1,4 +1,5 @@
 import { Nullish } from "@uxf/core/types";
+import { ColumnTypes } from "../column-types";
 import { FilterHandlers } from "../filter-handler";
 import { HiddenColumnsComponentComponent } from "../hidden-columns/types";
 import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
@@ -10,13 +11,16 @@ import { DataGridFetchingResult } from "../use-data-grid-fetching";
 import { BodyCellComponents, ChangeTabFilterBehavior } from "./components";
 import { CsvDownloadGetUrl, KeyExtractor, RowAccent } from "./core";
 import { BaseGridType, Schema } from "./schema";
+export type InferDataGridRow<S> = S extends Schema<infer G extends BaseGridType> ? {
+    [K in keyof G["columns"]]: G["columns"][K] extends keyof ColumnTypes ? ColumnTypes[G["columns"][K]] : never;
+} : never;
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
-export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
+export type DataGridBaseProps<GridType extends BaseGridType> = {
     HiddenColumnsComponent?: HiddenColumnsComponentComponent;
     NoRowsFallback?: NoRowsFallbackComponent;
     SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
-    actionCell?: DataGridTableProps<Row>["actionCell"];
+    actionCell?: DataGridTableProps<GridType>["actionCell"];
     bodyCells?: BodyCellComponents;
     changeTabFilterBehavior?: ChangeTabFilterBehavior;
     className?: string;
@@ -26,13 +30,14 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     headerRowHeight?: number;
     isDebug?: boolean;
-    isRowSelectDisabled?: (row: Row) => boolean;
+    isHiddenColumnsSortable?: boolean;
+    isRowSelectDisabled?: (row: InferDataGridRow<Schema<GridType>>) => boolean;
     isRowsSelectable?: boolean;
     keyExtractor?: KeyExtractor;
-    rowAccent?: (row: Row) => RowAccent;
-    rowClassName?: (row: Row) => string | Nullish;
-    rowHeight?: number | ((row: Row) => number) | "auto";
+    rowAccent?: (row: InferDataGridRow<Schema<GridType>>) => RowAccent;
+    rowClassName?: (row: InferDataGridRow<Schema<GridType>>) => string | Nullish;
+    rowHeight?: number | ((row: InferDataGridRow<Schema<GridType>>) => number) | "auto";
     schema: Schema<GridType>;
     tabsVariant?: "default" | "segmented";
 };
-export type DataGridProps<GridType extends BaseGridType, Row> = DataGridBaseProps<GridType, Row> & DataGridDataProps<Row> & DataGridControlProps;
+export type DataGridProps<GridType extends BaseGridType> = DataGridBaseProps<GridType> & DataGridDataProps<InferDataGridRow<Schema<GridType>>> & DataGridControlProps;

package/types/schema.d.ts

@@ -10,8 +10,8 @@ export interface Tab {
     s?: DataGridSort;
 }
 export type BaseGridType = {
-    columns: any;
-    filters: any;
+    columns: Record<string, string>;
+    filters: Record<string, string>;
 };
 export type ColumnWidthUnit = number | `${number}fr`;
 export type ColumnConfig = {
@@ -19,17 +19,14 @@ export type ColumnConfig = {
     width?: ColumnWidthUnit;
     minWidth?: number;
 };
-export type Column<Name, Type> = {
-    name: Name;
+export type Column = {
+    name: string;
     label: string | ReactElement;
-    type: Type;
+    type: string;
     sort?: boolean;
     hidden?: boolean;
     config?: ColumnConfig;
 };
-export type Columns<C extends BaseGridType["columns"]> = {
-    [K in keyof C]: Column<K, C[K]>;
-}[keyof C];
 export type FilterConfig = {
     placeholder?: string;
 };
@@ -47,7 +44,7 @@ export interface Filter {
 }
 export interface Schema<GridType extends BaseGridType> {
     name: string;
-    columns: Columns<GridType["columns"]>[];
+    columns: Column[];
     filters: Filter[];
     tabs?: Tab[];
     s: DataGridSort;

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -11,7 +11,7 @@ export interface UseDataGridControlConfig<GridType extends BaseGridType> {
     middleware?: Middleware<DataGridState<any>, Action>;
 }
 export declare function useDataGridControl<T extends BaseGridType>(config: UseDataGridControlConfig<T>): {
-    state: DataGridState<T>;
+    state: DataGridState<any>;
     actions: {
         changePage: (page: number) => void;
         changePerPage: (perPage: number) => void;