@uxf/data-grid 10.0.0-beta.6 → 10.0.0-beta.60

package/data-grid.js

@@ -121,7 +121,7 @@ const DataGrid = (props) => {
         react_1.default.createElement(Container, { noBorder: props.noBorder, className: props.className },
             react_1.default.createElement(Toolbar, { noBorder: props.noBorder },
                 react_1.default.createElement(ToolbarTabs, { activeTab: state.request.tab, onChange: (tab) => dispatch(actions_1.dataGridActions.changeTab(tab)), schema: props.schema }),
-                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, filtersData: state.request.f, fulltextValue: state.request.search, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText }),
+                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText, hiddenColumns: props.hiddenColumns, onChangeHiddenColumns: props.onChangeHiddenColumns, onCsvDownload: props.onCsvDownload, state: state }),
                 react_1.default.createElement(ToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(LinearProgress, { loading: !!state.loading }),
             react_1.default.createElement(FilterList, { gridName: props.gridName, onFilter: onFilter, filters: props.schema.filters, filtersData: state.request.f, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder }),

package/data-grid.stories.js

@@ -223,12 +223,19 @@ const loader = async (_, request) => {
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };
+const onCsvDownload = (request) => {
+    // eslint-disable-next-line no-console
+    console.log(request);
+};
 function Default() {
     const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)([]);
     const [selectedRows, setSelectedRows] = (0, react_1.useState)(new Set());
     const callbackRef = (0, _1.useCallbackRef)();
     return (react_1.default.createElement("div", { className: "min-h-screen bg-gray-50 p-4 dark:bg-gray-950" },
-        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", defaultConfig: {
+        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: (row, reload) => {
+                console.log(row, reload);
+                reload();
+            }, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", onCsvDownload: onCsvDownload, defaultConfig: {
                 columns: {
                     id: { width: 50, hidden: true },
                     text: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "10.0.0-beta.6",
+  "version": "10.0.0-beta.60",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -30,6 +30,7 @@
     "node": ">=8.9"
   },
   "peerDependencies": {
+    "@uxf/ui": "10.0.0-beta.60",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "dayjs": "^1.11.7"

package/tailwindui/components/action-cell-base.js

@@ -74,8 +74,10 @@ const Button = (props) => {
     return null;
 };
 const ActionCellBase = (props) => {
+    const onRemove = props.onRemove;
+    const handleRemove = onRemove ? () => onRemove(props.row, props.reload) : undefined;
     return (react_1.default.createElement(exports.ActionCellWrapper, null,
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onRemove, getUrl: undefined, icon: "trash", title: "Smazat" }),
+        react_1.default.createElement(Button, { row: props.row, onClick: handleRemove, getUrl: undefined, icon: "trash", title: "Smazat" }),
         react_1.default.createElement(Button, { row: props.row, onClick: props.onEdit, getUrl: props.getEditUrl, icon: "pen", title: "Upravit" }),
         react_1.default.createElement(Button, { row: props.row, onClick: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" })));
 };

package/tailwindui/components/toolbar-control.js

@@ -32,6 +32,7 @@ const drawer_1 = require("./drawer");
 const toggle_1 = require("@uxf/ui/toggle");
 const actions_1 = require("../../store/actions");
 const show_1 = require("../show");
+const utils_1 = require("../../utils");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         var _a, _b;
@@ -47,21 +48,37 @@ function Filters(props) {
     })));
 }
 function Columns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: true, onChange: () => null })))));
+    const onHideColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), columnName]);
+    };
+    const onShowColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : [])].filter((v) => v !== columnName));
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
+        var _a;
+        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_a = props.hiddenColumns) === null || _a === void 0 ? void 0 : _a.includes(column.name)), onChange: (value) => (value ? onShowColumn(column.name) : onHideColumn(column.name)) }));
+    })));
 }
 const ToolbarControl = (props) => {
     const [isFiltersOpen, setFiltersOpen] = (0, react_1.useState)(false);
     const [isColumnsOpen, setColumnsOpen] = (0, react_1.useState)(false);
+    const fulltextValue = props.state.request.search;
+    const filtersData = props.state.request.f;
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(show_1.Show, { when: props.showFulltext },
-            react_1.default.createElement(text_input_1.TextInput, { value: props.fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }) })),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-filter" },
+            react_1.default.createElement(text_input_1.TextInput, { value: fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), label: "Vyhled\u00E1v\u00E1n\u00ED", hiddenLabel: true })),
+        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
             react_1.default.createElement(icon_1.Icon, { name: "filter" })),
         react_1.default.createElement(show_1.Show, { when: props.onChangeHiddenColumns && props.hiddenColumns },
-            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F" },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
                 react_1.default.createElement(icon_1.Icon, { name: "table-columns" }))),
+        react_1.default.createElement(show_1.Show, { when: props.onCsvDownload },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onCsvDownload) === null || _a === void 0 ? void 0 : _a.call(props, (0, utils_1.createRequest)(props.state, props.schema.sort, props.schema.dir)); }, title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" }))),
         react_1.default.createElement(drawer_1.Drawer, { open: isFiltersOpen, onClose: () => setFiltersOpen(false), title: "Filtry" },
-            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: props.filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
+            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
         react_1.default.createElement(drawer_1.Drawer, { open: isColumnsOpen, onClose: () => setColumnsOpen(false), title: "Nastaven\u00ED sloupc\u016F" },
             react_1.default.createElement(Columns, { schema: props.schema, onChangeHiddenColumns: props.onChangeHiddenColumns, hiddenColumns: props.hiddenColumns }))));
 };

package/tailwindui/filter-handler/index.js

@@ -14,6 +14,7 @@ exports.defaultFilterHandlers = {
     string: text_filter_1.default,
     bool: bool_filter_1.default,
     boolean: boolean_filter_1.default,
+    checkbox: boolean_filter_1.default,
     interval: interval_filter_1.default,
     select: select_filter_1.default,
 };

package/tailwindui/styles.css

@@ -1,5 +1,5 @@
 .uxf-data-grid {
-    @apply border border-gray-300 dark:border-gray-700 rounded;
+    @apply rounded border border-gray-300 dark:border-gray-700;
 
     &.no-border {
         @apply border-0;
@@ -16,7 +16,7 @@
     }
 
     &__action-cell-wrapper {
-        @apply flex items-center justify-center text-center w-full h-full space-x-2;
+        @apply flex h-full w-full items-center justify-center space-x-2 text-center;
 
         .uxf-icon {
             @apply text-gray-400 dark:text-gray-500;
@@ -25,23 +25,23 @@
 
     &__body-cell {
         &--boolean {
-            @apply w-full h-full flex items-center;
+            @apply flex h-full w-full items-center;
         }
     }
 
     &__drawer {
-        @apply fixed overflow-hidden z-10 bg-gray-900 bg-opacity-25 dark:bg-opacity-75 inset-0 transform ease-in-out;
+        @apply fixed inset-0 z-10 transform overflow-hidden bg-gray-900 bg-opacity-25 ease-in-out dark:bg-opacity-75;
 
         &--open {
-            @apply transition-opacity opacity-100 duration-500 translate-x-0;
+            @apply translate-x-0 opacity-100 transition-opacity duration-500;
         }
 
         &--closed {
-            @apply transition-all delay-500 opacity-0 translate-x-full;
+            @apply translate-x-full opacity-0 transition-all delay-500;
         }
 
         &-body-wrapper {
-            @apply w-11/12 max-w-sm right-0 absolute bg-white h-full shadow-xl duration-500 ease-in-out transition-all transform translate-x-full;
+            @apply absolute right-0 h-full w-11/12 max-w-sm translate-x-full transform bg-white shadow-xl transition-all duration-500 ease-in-out;
 
             &--open {
                 @apply translate-x-0;
@@ -49,15 +49,15 @@
         }
 
         &-body {
-            @apply relative w-full max-w-sm pb-10 flex flex-col overflow-y-scroll h-full dark:bg-gray-950 dark:text-gray-100;
+            @apply relative flex h-full w-full max-w-sm flex-col overflow-y-scroll pb-10 dark:bg-gray-950 dark:text-gray-100;
         }
 
         &-close-button {
-            @apply ml-auto !mt-4 mr-4;
+            @apply !mt-4 ml-auto mr-4;
         }
 
         &-header {
-            @apply p-4 pt-8 font-bold text-lg;
+            @apply p-4 pt-8 text-lg font-bold;
         }
 
         &-content {
@@ -65,7 +65,7 @@
         }
 
         &-backdrop {
-            @apply w-screen h-full cursor-pointer;
+            @apply h-full w-screen cursor-pointer;
         }
     }
 
@@ -77,7 +77,7 @@
 
     &__filter {
         &--interval {
-            @apply gap-4 grid grid-cols-[1fr_min-content_1fr];
+            @apply grid grid-cols-[1fr_min-content_1fr] gap-4;
 
             .uxf-data-grid__filter-gap {
                 @apply flex items-center pt-5;
@@ -90,11 +90,11 @@
     }
 
     &__filter-list {
-        @apply p-2 space-x-2;
+        @apply space-x-2 p-2;
     }
 
     &__footer {
-        @apply flex flex-wrap items-center justify-end p-2 gap-4;
+        @apply flex flex-wrap items-center justify-end gap-4 p-2;
 
         &.no-border {
             @apply px-0;
@@ -102,29 +102,23 @@
     }
 
     &__linear-progress {
-        position: absolute;
-        z-index: 1;
+        border-radius: 20px;
+        height: 3px;
         left: 0;
-        right: 0;
         overflow: hidden;
-        height: 3px;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
+        position: absolute;
+        right: 0;
+        z-index: 1;
 
         &.is-loading::before {
-            content: '';
-            position: absolute;
-            left: -50%;
-            height: 3px;
-            width: 40%;
-            background-color: theme("colors.dataGridSecondary");
-            -webkit-animation: datagridlineanim 1s linear infinite;
-            -moz-animation: datagridlineanim 1s linear infinite;
             animation: datagridlineanim 1s linear infinite;
-            -webkit-border-radius: 20px;
-            -moz-border-radius: 20px;
+            background-color: theme("colors.dataGridSecondary");
             border-radius: 20px;
+            content: "";
+            height: 3px;
+            left: -50%;
+            position: absolute;
+            width: 40%;
         }
     }
 
@@ -133,18 +127,18 @@
     }
 
     &__pagination-counts {
-        @apply text-sm text-neutral-700 text-lightLow;
+        @apply text-sm text-lightLow;
     }
 
     &__plugin-fulltext {
-        @apply my-2 text-gray-400 w-full sm:w-auto;
+        @apply my-2 w-full text-gray-400 sm:w-auto;
 
         .uxf-icon {
             @apply text-gray-400;
         }
     }
 
-    &__plugin-filter {
+    &__plugin-button {
         @apply my-2 shrink-0;
 
         .uxf-icon {
@@ -153,7 +147,7 @@
     }
 
     &__rows-per-page {
-        @apply flex flex-wrap gap-2 text-sm text-gray-700 items-center text-lightLow;
+        @apply flex flex-wrap items-center gap-2 text-sm text-lightLow;
 
         .uxf-select {
             @apply w-28;
@@ -161,19 +155,19 @@
     }
 
     &__select-row-checkbox-wrapper {
-        @apply flex items-center justify-center text-white w-full h-full;
+        @apply flex h-full w-full items-center justify-center text-white;
     }
 
     &__selected-rows-toolbar-wrapper {
-        @apply fixed bottom-8 left-0 right-0 flex flex-row justify-center items-center;
+        @apply fixed bottom-8 left-0 right-0 flex flex-row items-center justify-center;
     }
 
     &__selected-rows-toolbar {
-        @apply text-white text-sm bg-dataGridPrimary rounded-full px-6 py-2 flex items-center justify-center drop-shadow-xl border border-gray-100 dark:border-gray-800;
+        @apply flex items-center justify-center rounded-full border border-gray-100 bg-dataGridPrimary px-6 py-2 text-sm text-white drop-shadow-xl dark:border-gray-800;
     }
 
     &__selected-rows-toolbar-actions {
-        @apply pl-4 space-x-2;
+        @apply space-x-2 pl-4;
     }
 
     &__table {
@@ -181,11 +175,11 @@
     }
 
     &__toolbar {
-        @apply flex flex-wrap gap-2 items-center justify-end border-b border-b-gray-300 dark:border-b-gray-700 px-2 md:pl-0 py-2 md:py-0;
+        @apply flex flex-wrap items-center justify-end gap-2 border-b border-b-gray-300 px-2 py-2 dark:border-b-gray-700 md:py-0 md:pl-0;
     }
 
     &__toolbar-tab {
-        @apply inline-flex items-center hover:text-gray-700 whitespace-nowrap p-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700;
+        @apply inline-flex items-center whitespace-nowrap border-b-2 border-transparent p-4 text-sm font-medium text-gray-500 hover:text-gray-700;
 
         &.is-active {
             @apply border-dataGridPrimary text-dataGridPrimary;
@@ -197,17 +191,17 @@
 
         &-nav {
             &--desktop {
-                @apply -mb-px space-x-4 hidden;
+                @apply -mb-px hidden space-x-4;
 
-                @media screen(md) {
+                @screen md {
                     @apply flex;
                 }
             }
 
             &--mobile {
-                @apply flex items-center z-10 w-max;
+                @apply z-10 flex w-max items-center;
 
-                @media screen(md) {
+                @screen md {
                     @apply hidden;
                 }
 
@@ -226,11 +220,11 @@
         }
 
         &-modal-content {
-            @apply flex flex-col items-start divide-y divide-lightBorder dark:divide-darkBorder pb-4 pt-1 text-left;
+            @apply flex flex-col items-start divide-y divide-lightBorder pb-4 pt-1 text-left dark:divide-darkBorder;
         }
 
         &-modal-button {
-            @apply justify-start w-full;
+            @apply w-full justify-start;
         }
 
         &-modal-button-text {
@@ -238,16 +232,16 @@
         }
 
         &-modal-active-tab-icon {
-            @apply text-lightMedium dark:text-darkMedium mr-3;
+            @apply mr-3 text-lightMedium dark:text-darkMedium;
         }
     }
 
     &__toolbar-control {
-        @apply flex flex-row items-center justify-between gap-2 order-3 xs:order-2 w-full xs:w-auto;
+        @apply order-3 flex w-full flex-row items-center justify-between gap-2 xs:order-2 xs:w-auto;
     }
 
     &__toolbar-customs {
-        @apply flex flex-row items-center gap-2 order-2 xs:order-3 md:my-2;
+        @apply order-2 flex flex-row items-center gap-2 xs:order-3 md:my-2;
 
         &-mobile {
             @apply md:hidden;
@@ -260,18 +254,18 @@
 }
 
 .rdg-cell.action {
-    text-align: right;
-    border-right: 0;
     align-items: center;
+    border-right: 0;
+    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     display: flex;
     justify-content: center;
     position: sticky;
-    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     right: 0;
+    text-align: right;
 }
 
 .rdg-header-row {
-    @apply bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-600 font-medium;
+    @apply bg-gray-200 font-medium text-gray-400 dark:bg-gray-800 dark:text-gray-600;
 
     .rdg-cell {
         @apply rounded-none bg-gray-50 dark:bg-gray-900 dark:text-darkMedium;
@@ -287,12 +281,13 @@
 }
 
 .rdg-header-sort-name + span {
-    display: flex;
     align-items: center;
+    display: flex;
 }
 
 .rdg-cell {
     border-inline-end: none;
+    overflow: visible;
 
     &.rdg-cell-frozen {
         box-shadow: none;
@@ -349,4 +344,4 @@
         left: 100%;
         width: 100%;
     }
-}
+}

package/types/components.d.ts

@@ -3,7 +3,8 @@ import { BaseGridType, Columns, Filter, Filters, Schema } from "./schema";
 import { RequestFilter, Response } from "./api";
 import { PaginationProps } from "@uxf/ui/pagination/pagination";
 import { CheckboxFormatterProps } from "react-data-grid";
-import { ChangeHiddenColumnsHandler } from "./core";
+import { ChangeHiddenColumnsHandler, CsvDownloadHandler } from "./core";
+import { DataGridState } from "./state";
 /**
  * Action cell
  */
@@ -13,7 +14,7 @@ export interface ActionCellProps<R> {
     getOpenUrl?: (row: R) => string | null | undefined;
     onEdit?: (row: R) => void;
     getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R) => void;
+    onRemove?: (row: R, reload: () => void) => void;
     reload: () => Promise<void>;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
@@ -152,14 +153,14 @@ export interface ToolbarControlProps {
     gridName: string | undefined;
     schema: Schema<any>;
     dispatch: (action: any) => void;
-    filtersData: RequestFilter[];
     filterHandlers: FilterHandlers;
-    fulltextValue: string;
     onFulltextChange: (value: string) => void;
     noBorder: boolean | null | undefined;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     showFulltext?: boolean;
+    state: DataGridState;
 }
 export type ToolbarControlComponent = React.FC<ToolbarControlProps>;
 /**

package/types/core.d.ts

@@ -2,6 +2,7 @@ import { Request, Response, ResultItem } from "./api";
 import { BaseGridType } from "./schema";
 export type KeyExtractor = (row: ResultItem) => number;
 export type ChangeHiddenColumnsHandler = (hiddenColumns: string[]) => void;
+export type CsvDownloadHandler = (request: Request) => void;
 export type Loader = (gridName: string | undefined, request: Request, encodedRequest: string) => Promise<Response>;
 export type CallbackRef = {
     reload: () => Promise<void>;

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

@@ -4,7 +4,7 @@ import { Request } from "./api";
 import { DataGridProps as RDGProps } from "react-data-grid";
 import { ToolbarCustomsProps } from "./components";
 import { UIComponents } from "./ui-components";
-import { CallbackRef, ChangeHiddenColumnsHandler, Config, KeyExtractor, Loader } from "./core";
+import { CallbackRef, ChangeHiddenColumnsHandler, Config, CsvDownloadHandler, KeyExtractor, Loader } from "./core";
 export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     callbackRef?: MutableRefObject<CallbackRef | undefined>;
     schema: Schema<GridType>;
@@ -14,6 +14,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     keyExtractor?: KeyExtractor;
     initialState?: Request | string;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     onChangeSelectedRows?: (selectedRows: Set<number>) => void;
     selectedRows?: Set<number>;
@@ -21,7 +22,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     getOpenUrl?: (row: R) => string | null | undefined;
     onEdit?: (row: R) => void;
     getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R) => void;
+    onRemove?: (row: R, reload: () => void) => void;
     noBorder?: boolean;
     rowHeight?: RDGProps<any>["rowHeight"];
     headerRowHeight?: RDGProps<any>["headerRowHeight"];