@uxf/data-grid 11.2.6 → 11.4.0

package/_generator/index.js

@@ -14,90 +14,23 @@ function writeFile(filename, value) {
     writeFileSync(filename, value);
 }
 
-function generateSchemaFile(gridName, schemaRelativeImport) {
+function generateSchemaFile(gridName, schema, schemaRelativeImport) {
     return `import { Schema } from "@uxf/data-grid";
 import json from "${schemaRelativeImport}";
 
-export const dataGridSchema_${camelize(gridName)}: Schema<any> = json as any;`;
+type DataGrid_${camelize(gridName)} = {
+    columns: {
+        ${schema.columns.map((column) => `"${column.name}": "${column.type}",`).join("\n        ")}
+    },
+    filters: {
+        ${schema.filters.map((filter) => `"${filter.name}": "${filter.type}",`).join("\n        ")}
+    }
 }
 
-function generateUseDataGridControl(gridName) {
-    return `import { useDataGridControl, UseDataGridControlConfig } from "@uxf/data-grid/use-data-grid-control";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-
-export function useDataGridControl_${camelize(gridName)}(config: Omit<UseDataGridControlConfig, "schema">) {
-    return useDataGridControl({
-        schema,
-        ...config,
-    });
-}
-`;
-}
-
-function generateUseDataGridFetching(gridName, isLoaderRequired) {
-    return `import { Loader } from "@uxf/data-grid/types/core";
-import { useDataGridFetching, UseDataGridFetchingConfig } from "@uxf/data-grid/use-data-grid-fetching";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-    
-export function useDataGridFetching_${camelize(gridName)}(
-    config: Omit<UseDataGridFetchingConfig, "gridName" | "loader" | "schema"> & { loader${
-        isLoaderRequired ? "" : "?"
-    }: Loader },
-) {
-    return useDataGridFetching({ gridName: "${gridName}", schema, ...config });
-}
-`;
-}
-
-function generateDataGridFile(gridName, isLoaderRequired) {
-    return `import { Nullish } from "@uxf/core/types";
-import { DataGrid, DataGridProps, DataGridUserConfig, Loader, Request } from "@uxf/data-grid";
-import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
-import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
-import React from "react";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-
-type Props = Omit<
-    DataGridProps<any, any>,
-    "gridName" | "schema" | "state" | "actions" | "data" | "isLoading" | "onReload"
-> & {
-    loader${isLoaderRequired ? "" : "?"}: Loader;
-    initialUserConfig?: DataGridUserConfig | Nullish;
-    initialState?: Request | string | Nullish;
-};
-
-export function DataGrid_${camelize(gridName)}(props: Props) {
-    const { state, actions } = useDataGridControl({
-        schema,
-        initialState: props.initialState,
-        initialUserConfig: props.initialUserConfig,
-    });
-    
-    const { data, error, onReload, isLoading } = useDataGridFetching({
-        gridName: "${gridName}",
-        schema,
-        state,
-        loader: props.loader,
-    });
-
-    return (
-        <DataGrid<any>
-            state={state}
-            actions={actions}
-            data={data}
-            isLoading={isLoading}
-            error={error}
-            onReload={onReload}
-            {...props}
-            gridName="admin-club"
-            schema={schema}
-        />
-    );
-}
-`;
+export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
 }
 
-function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
+function generate(schema, filename, outputDirectory) {
     const gridName = parse(filename).name;
     const generatedPath = join(process.cwd(), outputDirectory, gridName);
 
@@ -105,16 +38,12 @@ function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
 
     writeFile(
         generatedSchemaFilename,
-        generateSchemaFile(gridName, relative(dirname(generatedSchemaFilename), filename)),
+        generateSchemaFile(gridName, schema, relative(dirname(generatedSchemaFilename), filename)),
     );
-
-    // writeFile(`${generatedPath}/data-grid.tsx`, generateDataGridFile(gridName, isLoaderRequired));
-    // writeFile(`${generatedPath}/use-data-grid-control.ts`, generateUseDataGridControl(gridName));
-    // writeFile(`${generatedPath}/use-data-grid-fetching.ts`, generateUseDataGridFetching(gridName, isLoaderRequired));
 }
 
 module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {
     globSync(schemaDirectory + "/*.json")
         .map((path) => process.cwd() + "/" + path)
-        .forEach((filename) => generate(readFileSync(filename), filename, outputDirectory, requiredLoader));
+        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, requiredLoader));
 };

package/_store/actions.d.ts

@@ -1,4 +1,4 @@
-import { DataGridSortDir, RequestFilter, Response } from "../types";
+import { DataGridSortDir, RequestFilter, Response, Tab } from "../types";
 export declare const dataGridActions: {
     filter: (filterValue: RequestFilter) => {
         type: string;
@@ -15,9 +15,9 @@ export declare const dataGridActions: {
         type: string;
         perPage: number;
     };
-    changeTab: (tabName: string) => {
+    changeTab: (tab: Tab) => {
         type: string;
-        name: string;
+        tab: Tab;
     };
     reload: () => {
         type: string;

package/_store/actions.js

@@ -17,9 +17,9 @@ exports.dataGridActions = {
         type: "CHANGE_PER_PAGE",
         perPage,
     }),
-    changeTab: (tabName) => ({
+    changeTab: (tab) => ({
         type: "CHANGE_TAB",
-        name: tabName,
+        tab,
     }),
     reload: () => ({
         type: "RELOAD",

package/_store/reducer.d.ts

@@ -1,8 +1,8 @@
 import { Nullish } from "@uxf/core/types";
 import { Reducer } from "react";
 import { Request } from "../types/api";
-import { Schema } from "../types/schema";
+import { BaseGridType, Schema } from "../types/schema";
 import { DataGridState, DataGridUserConfig } from "../types/state";
-export declare const getInitialState: (schema: Schema<any>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig | Nullish) => DataGridState;
-export declare const reducer: Reducer<DataGridState, any>;
-export declare const debugReducer: Reducer<DataGridState, any>;
+export declare function getInitialState<GridType extends BaseGridType>(schema: Schema<GridType>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig<GridType> | Nullish): DataGridState<GridType>;
+export declare const reducer: Reducer<DataGridState<any>, any>;
+export declare const debugReducer: Reducer<DataGridState<any>, any>;

package/_store/reducer.js

@@ -3,26 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const utils_1 = require("../utils");
-const getInitialState = (schema, init, initialUserConfig) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+function getInitialState(schema, init, initialUserConfig) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const initialState = (0, is_nil_1.isNil)(init) ? {} : typeof init === "string" ? (_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {} : init;
+    const tabName = (_e = (_b = initialState.tab) !== null && _b !== void 0 ? _b : (_d = (_c = schema.tabs) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : null;
+    const tabSort = tabName !== null ? (_g = (_f = schema.tabs) === null || _f === void 0 ? void 0 : _f.find((t) => t.name === tabName)) === null || _g === void 0 ? void 0 : _g.s : null;
     return {
         request: {
-            f: (_b = initialState.f) !== null && _b !== void 0 ? _b : [],
-            page: (_c = initialState.page) !== null && _c !== void 0 ? _c : 0,
-            dir: (_d = initialState.dir) !== null && _d !== void 0 ? _d : schema.dir,
-            sort: (_e = initialState.sort) !== null && _e !== void 0 ? _e : schema.sort,
-            perPage: (_g = (_f = initialState.perPage) !== null && _f !== void 0 ? _f : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _g !== void 0 ? _g : schema.perPage,
-            tab: (_l = (_h = initialState.tab) !== null && _h !== void 0 ? _h : (_k = (_j = schema.tabs) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : null,
-            search: (_m = initialState.search) !== null && _m !== void 0 ? _m : "",
+            f: (_h = initialState.f) !== null && _h !== void 0 ? _h : [],
+            s: (_k = (_j = initialState.s) !== null && _j !== void 0 ? _j : tabSort) !== null && _k !== void 0 ? _k : schema.s,
+            page: (_l = initialState.page) !== null && _l !== void 0 ? _l : 0,
+            perPage: (_o = (_m = initialState.perPage) !== null && _m !== void 0 ? _m : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _o !== void 0 ? _o : schema.perPage,
+            tab: tabName,
+            search: (_p = initialState.search) !== null && _p !== void 0 ? _p : "",
         },
         userConfig: {
-            columns: (_o = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _o !== void 0 ? _o : {},
-            perPage: (_p = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _p !== void 0 ? _p : schema.perPage,
+            columns: (_q = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _q !== void 0 ? _q : {},
+            perPage: (_r = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _r !== void 0 ? _r : schema.perPage,
         },
         tabRequests: {},
     };
-};
+}
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {
@@ -75,8 +76,10 @@ const reducer = (state, action) => {
                 ...state,
                 request: {
                     ...state.request,
-                    sort: action.columnName,
-                    dir: action.direction,
+                    s: {
+                        name: action.columnName,
+                        dir: action.direction,
+                    },
                 },
             };
         case "SORT_CLEAR":
@@ -84,8 +87,7 @@ const reducer = (state, action) => {
                 ...state,
                 request: {
                     ...state.request,
-                    sort: null,
-                    dir: null,
+                    s: null,
                 },
             };
         case "FULLTEXT":
@@ -99,21 +101,20 @@ const reducer = (state, action) => {
             };
         case "CHANGE_TAB":
             // eslint-disable-next-line no-case-declarations,@typescript-eslint/no-unnecessary-condition
-            const tabHistory = (_a = state.tabRequests[action.name]) !== null && _a !== void 0 ? _a : {};
+            const tabHistory = (_a = state.tabRequests[action.tab.name]) !== null && _a !== void 0 ? _a : {};
             return {
                 ...state,
                 request: {
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     f: (_b = tabHistory.f) !== null && _b !== void 0 ? _b : [],
+                    s: (_d = (_c = tabHistory.s) !== null && _c !== void 0 ? _c : action.tab.s) !== null && _d !== void 0 ? _d : state.request.s,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    search: (_c = tabHistory.search) !== null && _c !== void 0 ? _c : "",
+                    search: (_e = tabHistory.search) !== null && _e !== void 0 ? _e : "",
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    page: (_d = tabHistory.page) !== null && _d !== void 0 ? _d : 0,
+                    page: (_f = tabHistory.page) !== null && _f !== void 0 ? _f : 0,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    perPage: (_e = tabHistory.perPage) !== null && _e !== void 0 ? _e : state.request.perPage,
-                    dir: (_f = tabHistory.dir) !== null && _f !== void 0 ? _f : state.request.dir,
-                    sort: (_g = tabHistory.sort) !== null && _g !== void 0 ? _g : state.request.sort,
-                    tab: action.name,
+                    perPage: (_g = tabHistory.perPage) !== null && _g !== void 0 ? _g : state.request.perPage,
+                    tab: action.tab.name,
                 },
                 tabRequests: {
                     ...state.tabRequests,

package/_story-utils/loader.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loader = void 0;
 const data_1 = require("./data");
 const loader = async (_, request) => {
-    const { page = 1, perPage = 10, tab, sort, dir, f } = request;
+    const { page = 1, perPage = 10, tab, s, f } = request;
     // eslint-disable-next-line no-console
     console.log("filter", f === null || f === void 0 ? void 0 : f.length);
     const filteredData = data_1.data
         .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
         .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
         .sort((a, b) => {
-        if (!sort || !dir) {
+        if (!s) {
             return 1;
         }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -20,9 +20,9 @@ const loader = async (_, request) => {
         // @ts-ignore
         const second = b[sort];
         if (typeof first === "number") {
-            return dir === "asc" ? first - second : second - first;
+            return s.dir === "asc" ? first - second : second - first;
         }
-        return dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
+        return s.dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
     });
     // eslint-disable-next-line no-console
     console.log("loader", request);

package/_story-utils/schema.js

@@ -55,11 +55,20 @@ exports.schema = {
     ],
     tabs: [
         { name: "all", label: "All" },
-        { name: "only-odd-ids", label: "Only odd ids blablabla" },
+        {
+            name: "only-odd-ids",
+            label: "Only odd ids blablabla",
+            s: {
+                name: "id",
+                dir: types_1.DataGridSortDir.Desc,
+            },
+        },
         // { name: "only-odd-ids", label: "Only odd ids" },
     ],
-    dir: types_1.DataGridSortDir.Asc,
-    sort: "id",
+    s: {
+        name: "id",
+        dir: types_1.DataGridSortDir.Asc,
+    },
     perPage: 10,
     fullText: true,
 };

package/data-grid.stories.js

@@ -38,6 +38,14 @@ function Default() {
     const [noBorder, setNoBorder] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
+        initialUserConfig: {
+            columns: {
+                id: { minWidth: 50 },
+                text: { minWidth: 300 },
+                mail: { minWidth: 300 },
+                tel: { minWidth: 300 },
+            },
+        },
     });
     const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,

package/export-button/export-button.js

@@ -9,7 +9,7 @@ const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 function ExportButton(props) {
-    return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request, props.schema.sort, props.schema.dir)), title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+    return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request)), title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
         react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" })));
 }
 exports.ExportButton = ExportButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.2.6",
+  "version": "11.4.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -31,7 +31,7 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/ui": "11.1.0",
+    "@uxf/ui": "11.4.0",
     "dayjs": "1.11.10",
     "fast-glob": "^3.3.2",
     "qs": "6.11.2",

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -1,4 +1,4 @@
 import { Column } from "react-data-grid";
 import { DataGridState } from "../../types";
 import { TableProps } from "../types";
-export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState): Column<any>[];
+export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState<any>): Column<any>[];

package/table/table.js

@@ -74,8 +74,8 @@ function Table(props) {
             props.actions.sortClear();
         }
     };
-    const sortColumns = props.state.request.sort && props.state.request.dir
-        ? [{ columnKey: props.state.request.sort, direction: props.state.request.dir.toUpperCase() }]
+    const sortColumns = props.state.request.s
+        ? [{ columnKey: props.state.request.s.name, direction: props.state.request.s.dir.toUpperCase() }]
         : [];
     const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
         headerRowHeight: props.headerRowHeight,

package/toolbar-tabs/toolbar-tabs.js

@@ -17,13 +17,13 @@ function ToolbarTabs(props) {
     var _a, _b, _c, _d;
     return (react_1.default.createElement(show_1.Show, { when: !!((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs" },
-            react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t.name) })))),
+            react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t) })))),
             react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--mobile" },
                 react_1.default.createElement(button_1.Button, { variant: "text", className: "uxf-data-grid__toolbar-tabs-button", size: "sm", onClick: () => {
                         var _a;
                         return (0, modal_service_1.openModal)({
                             children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, variant: "text", size: "xl", onClick: () => {
-                                    props.actions.changeTab(item.name);
+                                    props.actions.changeTab(item);
                                     (0, modal_service_1.closeModal)();
                                 } },
                                 item.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),

package/types/api.d.ts

@@ -1,4 +1,4 @@
-import { DataGridSortDir } from "./schema";
+import { DataGridSort } from "./schema";
 export type ResultItem = any;
 export interface RequestFilter<T = any> {
     name: string;
@@ -8,8 +8,7 @@ export interface RequestFilter<T = any> {
 }
 export interface Request {
     f?: RequestFilter[];
-    sort?: string;
-    dir?: DataGridSortDir;
+    s?: DataGridSort;
     page?: number;
     perPage?: number;
     search?: string;

package/types/schema.d.ts

@@ -3,10 +3,15 @@ export declare enum DataGridSortDir {
     Asc = "asc",
     Desc = "desc"
 }
+export interface DataGridSort {
+    name: string;
+    dir: DataGridSortDir;
+}
 export interface Tab {
     name: string;
     label: string;
     icon?: string;
+    s?: DataGridSort;
 }
 export type BaseGridType = {
     columns: any;
@@ -44,8 +49,7 @@ export interface Schema<GritType extends BaseGridType> {
     columns: Columns<GritType["columns"]>[];
     filters: Filters<GritType["filters"]>[];
     tabs?: Tab[];
-    sort: string;
-    dir: DataGridSortDir;
+    s: DataGridSort;
     perPage: number;
     fullText?: boolean;
 }

package/types/state.d.ts

@@ -1,9 +1,8 @@
 import { RequestFilter } from "./api";
-import { DataGridSortDir } from "./schema";
+import { BaseGridType, DataGridSort } from "./schema";
 export type GridRequest = {
     f: RequestFilter[];
-    sort: string | null;
-    dir: DataGridSortDir | null;
+    s: DataGridSort | null;
     page: number;
     perPage: number;
     search: string;
@@ -14,14 +13,14 @@ interface ColumnConfig {
     width?: number;
     minWidth?: number;
 }
-export interface DataGridUserConfig {
-    columns?: Record<string, ColumnConfig>;
+export interface DataGridUserConfig<GridType extends BaseGridType> {
+    columns?: Partial<Record<keyof GridType["columns"], ColumnConfig>>;
     perPage?: number;
 }
-export interface DataGridState {
+export interface DataGridState<GridType extends BaseGridType> {
     request: GridRequest;
     selectedRows?: any[];
-    userConfig: DataGridUserConfig;
+    userConfig: DataGridUserConfig<GridType>;
     tabRequests: {
         [tab: string]: GridRequest;
     };

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

@@ -1,5 +1,6 @@
 import { Dispatch } from "react";
 import { RequestFilter } from "../types/api";
+import { Tab } from "../types/schema";
 export declare function createActions(dispatch: Dispatch<any>): {
     changePage: (page: number) => void;
     changePerPage: (perPage: number) => void;
@@ -7,7 +8,7 @@ export declare function createActions(dispatch: Dispatch<any>): {
     sort: (columnName: string, direction: string) => void;
     sortClear: () => void;
     search: (search: string) => void;
-    changeTab: (tabName: string) => void;
+    changeTab: (tab: Tab) => void;
     setSelectedRows: (rows: any[]) => void;
     hideColumn: (name: string) => void;
     showColumn: (name: string) => void;

package/use-data-grid-control/actions-factory.js

@@ -9,7 +9,7 @@ function createActions(dispatch) {
         sort: (columnName, direction) => dispatch({ type: "SORT", columnName, direction }),
         sortClear: () => dispatch({ type: "SORT_CLEAR" }),
         search: (search) => dispatch({ type: "FULLTEXT", search }),
-        changeTab: (tabName) => dispatch({ type: "CHANGE_TAB", name: tabName }),
+        changeTab: (tab) => dispatch({ type: "CHANGE_TAB", tab }),
         setSelectedRows: (rows) => dispatch({ type: "SET_SELECTED_ROWS", rows }),
         hideColumn: (name) => dispatch({ type: "HIDE_COLUMN", name }),
         showColumn: (name) => dispatch({ type: "SHOW_COLUMN", name }),

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

@@ -1,15 +1,15 @@
 import { Nullish } from "@uxf/core/types";
 import { Request } from "../types/api";
-import { Schema } from "../types/schema";
+import { BaseGridType, Schema } from "../types/schema";
 import { DataGridUserConfig } from "../types/state";
-export interface UseDataGridControlConfig {
-    schema: Schema<any>;
+export interface UseDataGridControlConfig<GridType extends BaseGridType> {
+    schema: Schema<GridType>;
     initialState?: Request | string | Nullish;
     isDebug?: boolean;
-    initialUserConfig?: DataGridUserConfig | Nullish;
+    initialUserConfig?: DataGridUserConfig<GridType> | Nullish;
 }
-export declare function useDataGridControl(config: UseDataGridControlConfig): {
-    state: import("../types/state").DataGridState;
+export declare function useDataGridControl<T extends BaseGridType>(config: UseDataGridControlConfig<T>): {
+    state: import("../types/state").DataGridState<any>;
     actions: {
         changePage: (page: number) => void;
         changePerPage: (perPage: number) => void;
@@ -17,7 +17,7 @@ export declare function useDataGridControl(config: UseDataGridControlConfig): {
         sort: (columnName: string, direction: string) => void;
         sortClear: () => void;
         search: (search: string) => void;
-        changeTab: (tabName: string) => void;
+        changeTab: (tab: import("../types/schema").Tab) => void;
         setSelectedRows: (rows: any[]) => void;
         hideColumn: (name: string) => void;
         showColumn: (name: string) => void;

package/use-data-grid-fetching/use-data-grid-fetching.js

@@ -5,14 +5,14 @@ const react_1 = require("react");
 const utils_1 = require("../utils");
 const loader_1 = require("./loader");
 function useDataGridFetching(config) {
-    const { state, schema, loader = loader_1.dataGridLoader, gridName } = config;
+    const { state, loader = loader_1.dataGridLoader, gridName } = config;
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
     const stringStateRequest = JSON.stringify(state.request);
     const reload = (0, react_1.useCallback)(() => {
         const stateRequest = JSON.parse(stringStateRequest);
-        const request = (0, utils_1.createRequest)(stateRequest, schema.sort, schema.dir);
+        const request = (0, utils_1.createRequest)(stateRequest);
         setIsLoading(true);
         loader(gridName, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {
@@ -27,7 +27,7 @@ function useDataGridFetching(config) {
             setError(e);
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stringStateRequest, schema.sort, schema.dir, gridName]);
+    }, [stringStateRequest, gridName]);
     (0, react_1.useEffect)(() => {
         reload();
     }, [reload]);

package/utils.d.ts

@@ -1,6 +1,5 @@
 import { Request } from "./types/api";
-import { DataGridSortDir } from "./types/schema";
 import { GridRequest } from "./types/state";
 export declare function decodeFilter(filterString: string): null | Request;
 export declare function encodeFilter(request: Request): string;
-export declare function createRequest(request: GridRequest, defaultSort: string, defaultDir: DataGridSortDir): Request;
+export declare function createRequest(request: GridRequest): Request;

package/utils.js

@@ -9,8 +9,7 @@ function decodeFilter(filterString) {
             f: filter.f || [],
             perPage: filter.perPage || 10,
             page: filter.page || 0,
-            dir: filter.dir || "asc",
-            sort: filter.sort || "id",
+            s: filter.s,
             tab: (_a = filter.tab) !== null && _a !== void 0 ? _a : null,
             search: (_b = filter.search) !== null && _b !== void 0 ? _b : "",
         };
@@ -24,14 +23,12 @@ function encodeFilter(request) {
     return btoa(unescape(encodeURIComponent(JSON.stringify(request))));
 }
 exports.encodeFilter = encodeFilter;
-function createRequest(request, defaultSort, defaultDir) {
-    var _a, _b;
+function createRequest(request) {
     return {
-        sort: (_a = request.sort) !== null && _a !== void 0 ? _a : defaultSort,
-        dir: (_b = request.dir) !== null && _b !== void 0 ? _b : defaultDir,
         perPage: request.perPage,
         page: request.page,
         f: request.f.filter((f) => f.value !== undefined && f.value !== null && f.value !== ""),
+        s: request.s || undefined,
         search: request.search,
         tab: request.tab,
     };