fastapi-rtk 0.2.9 → 0.2.11

package/dist/.bundled/jsonforms/cjs/packages/jsonforms/src/MantineInputs/MantineDateTimeInput.cjs

@@ -26,7 +26,7 @@ function MantineDateTimeInput({ margin, ...props }) {
     }
   }, [data, setToLocal, setToUTC]);
   const componentProps = React.useMemo(() => ({ ...commonProps, ...dateProps }), [commonProps, dateProps]);
-  const [Component, _props] = useContextProps.useContextProps("DateTime", path, componentProps, props);
+  const [Component, { initialUTC: _, ..._props }] = useContextProps.useContextProps("DateTime", path, componentProps, props);
   if (!props.visible) {
     return null;
   }

package/dist/.bundled/jsonforms/esm/packages/jsonforms/src/MantineInputs/MantineDateTimeInput.mjs

@@ -24,7 +24,7 @@ function MantineDateTimeInput({ margin, ...props }) {
     }
   }, [data, setToLocal, setToUTC]);
   const componentProps = useMemo(() => ({ ...commonProps, ...dateProps }), [commonProps, dateProps]);
-  const [Component, _props] = useContextProps("DateTime", path, componentProps, props);
+  const [Component, { initialUTC: _, ..._props }] = useContextProps("DateTime", path, componentProps, props);
   if (!props.visible) {
     return null;
   }

package/dist/core/cjs/ActionIcons/Edit/EditDialog.cjs

@@ -5,6 +5,7 @@ const constants = require("fastapi-rtk/constants");
 const utils = require("fastapi-rtk/utils");
 const core = require("@mantine/core");
 const hooks = require("@mantine/hooks");
+const lodash = require("../../_virtual/lodash.cjs");
 const React = require("react");
 const convertToFormInputs = require("../../fab-react-toolkit-patch/utils/convertToFormInputs.cjs");
 const useApi = require("../../hooks/api/useApi.cjs");
@@ -23,11 +24,31 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     () => utils.deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
     [_jsonForms, __jsonForms]
   );
+  const { fab } = useInfo.useInfo();
+  const initialState = React.useMemo(
+    () => ({
+      ...constants.initialState,
+      data: fab ? convertToFormInputs.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_schema)
+    }),
+    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
+  );
+  const initialStateRef = React.useRef(initialState);
+  React.useEffect(() => {
+    setState({ data: initialState.data });
+    initialStateRef.current = initialState;
+  }, [initialState, setState]);
   const onSubmit = React.useCallback(
     (e) => {
       e == null ? void 0 : e.preventDefault();
       setLoading(true);
-      updateEntry(utils.getItemId(getItem()), getState().data).then((res) => {
+      const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
+        if (lodash.lodashExports.isEqual(value, initialStateRef.current.data[key])) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      }, {});
+      updateEntry(utils.getItemId(getItem()), new_data).then((res) => {
         if (res) {
           refetch();
           refetchInfo();
@@ -40,17 +61,6 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     },
     [setLoading, updateEntry, getItem, getState, refetch, refetchInfo, setOpened]
   );
-  const { fab } = useInfo.useInfo();
-  const initialState = React.useMemo(
-    () => ({
-      ...constants.initialState,
-      data: fab ? convertToFormInputs.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_schema)
-    }),
-    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
-  );
-  React.useEffect(() => {
-    setState({ data: initialState.data });
-  }, [initialState, setState]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     CommonModal.CommonModal,
     {

package/dist/core/cjs/ActionIcons/Modals/CommonModal.cjs

@@ -24,6 +24,7 @@ function CommonModal({
   boxProps,
   buttonText,
   buttonLoading,
+  withTitleOptions = true,
   ...props
 }) {
   var _a;
@@ -57,7 +58,7 @@ function CommonModal({
       ...props,
       title: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         props.title,
-        !fab && //* Backward compatibility to fab-react-toolkit
+        !fab && withTitleOptions && //* Backward compatibility to fab-react-toolkit
         /* @__PURE__ */ jsxRuntime.jsx(core.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { gap: "xs", pr: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             core.CloseButton,

package/dist/core/cjs/Tables/NextGenDataGrid/NextGenDataGrid.cjs

@@ -28,7 +28,7 @@ const useToolbarAlertBanner = require("./hooks/useToolbarAlertBanner/useToolbarA
 const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
 const NextGenDataGrid = React.forwardRef((props, ref) => {
   var _a, _b, _c;
-  const { info, data, queryParams, refetch, specialKey } = useApi.useApi();
+  const { info, data, queryParams, setQueryParams, refetch, specialKey } = useApi.useApi();
   const propsFromMantineTheme = core.useProps("NextGenDataGrid", {}, {});
   const {
     children,
@@ -54,6 +54,8 @@ const NextGenDataGrid = React.forwardRef((props, ref) => {
     textFilterSeparator = ";",
     enableAdvancedFilters,
     wrapperProps,
+    memo,
+    queryOnlyVisibleColumns,
     // Deprecated props
     bodySeparator,
     bodyTruncate,
@@ -136,7 +138,7 @@ const NextGenDataGrid = React.forwardRef((props, ref) => {
   const dataProps = useData.useData();
   const sortingProps = useSorting.useSorting();
   const paginationProps = usePagination.usePagination(hidePagination);
-  const columnsProps = useColumns.useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters);
+  const columnsProps = useColumns.useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters, memo);
   const sizeProps = useSize.useSize(withBorder);
   const actionsProps = useActions.useActions(hideActions, (_a = utils.mergeProps(body, specialKey.actions)) == null ? void 0 : _a.component);
   const globalFilterProps = useGlobalFilter.useGlobalFilter();
@@ -191,6 +193,18 @@ const NextGenDataGrid = React.forwardRef((props, ref) => {
     onSelectCheckbox == null ? void 0 : onSelectCheckbox(Object.keys(mrtTable.getState().rowSelection));
     bulkActions == null ? void 0 : bulkActions.setSelectedIds(Object.keys(mrtTable.getState().rowSelection));
   }, [bulkActions, data == null ? void 0 : data.ids, mrtTable.getState().rowSelection, onSelectCheckbox]);
+  React.useEffect(() => {
+    if (!queryOnlyVisibleColumns || !(data == null ? void 0 : data.list_columns)) {
+      return;
+    }
+    const columnVisibility = mrtTable.getState().columnVisibility;
+    const visibleColumns = mrtTable.getAllColumns().filter((col) => columnVisibility[col.id] !== false).filter((col) => data.list_columns.includes(col.id));
+    if (data.list_columns.length === visibleColumns.length) {
+      setQueryParams({ columns: [] });
+      return;
+    }
+    setQueryParams({ columns: visibleColumns.map((col) => col.id) });
+  }, [mrtTable.getState().columnVisibility, setQueryParams]);
   const { setView: setViewAdd } = useForms.useForms("add");
   const { setView: setViewEdit } = useForms.useForms("edit");
   React.useEffect(() => {

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/{Body.cjs → Cell.cjs}

@@ -7,12 +7,14 @@ const useApi = require("../../../../hooks/api/useApi.cjs");
 const useAuth = require("../../../../hooks/auth/useAuth.cjs");
 const FallbackWrapper = require("../../FallbackWrapper.cjs");
 const MultiLineHighlight = require("./MultiLineHighlight.cjs");
-const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
+const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
   const { table, column, cell } = mrtProps;
   const api = useApi.useApi();
   const auth = useAuth.useAuth();
   const { specialKey } = useApi.useApi();
-  const { component, separator, truncate, tooltipProps, highlightProps } = utils.mergeProps(body, specialKey.all, col);
+  const colProps = utils.mergeProps(body, specialKey.all, col);
+  const { component, separator, truncate, highlight: _highlight, tooltipProps, highlightProps } = colProps;
+  let functionProps = { api, auth, data: cell.row.original, colProps, mrtProps };
   const highlights = React.useMemo(() => {
     const globalFilter = table.getState().globalFilter;
     const columnTextFilter = column.getFilterValue();
@@ -23,8 +25,12 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
     if (columnTextFilter && typeof columnTextFilter === "string") {
       highlights2.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
     }
+    if (_highlight) {
+      const extraHighlight = utils.parseFromValuesOrFunc(_highlight, functionProps);
+      highlights2.push(...Array.isArray(extraHighlight) ? extraHighlight : [extraHighlight]);
+    }
     return highlights2;
-  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator]);
+  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator, _highlight]);
   const cellObj = React.useMemo(() => {
     const result = { value: cell.getValue(), truncate: {}, highlight: [] };
     if (typeof result.value === "number") {
@@ -52,6 +58,7 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
     return result;
   }, [cell.getValue(), separator, truncate]);
   const highlight = React.useMemo(() => [...highlights, ...cellObj.highlight], [highlights, cellObj.highlight]);
+  functionProps = { ...functionProps, highlight, cell: cellObj, componentProps: { value: cellObj.value } };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FallbackWrapper.FallbackWrapper,
     {
@@ -60,25 +67,19 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
         {
           highlight,
           truncate: cellObj.truncate,
-          tooltipProps: utils.parseFromValuesOrFunc(tooltipProps, { value: cellObj.value, data: cell.row.original, cellObj }),
-          highlightProps: utils.parseFromValuesOrFunc(highlightProps, {
-            value: cellObj.value,
-            data: cell.row.original,
-            cellObj
-          }),
+          tooltipProps: utils.parseFromValuesOrFunc(tooltipProps, { ...functionProps.componentProps, functionProps }),
+          highlightProps: utils.parseFromValuesOrFunc(highlightProps, { ...functionProps.componentProps, functionProps }),
           children: cellObj.value
         }
       ),
-      functionProps: {
-        api,
-        auth,
-        data: cell.row.original,
-        highlight,
-        componentProps: { value: cellObj.value },
-        mrtProps
-      },
+      functionProps,
       children: component
     }
   );
 };
-exports.Body = Body;
+const MemoCell = React.memo(
+  Cell,
+  (prevProps, nextProps) => JSON.stringify(prevProps.memo) === JSON.stringify(nextProps.memo)
+);
+exports.Cell = Cell;
+exports.MemoCell = MemoCell;

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilter.cjs

@@ -86,4 +86,9 @@ const ColumnHeaderFilter = ({
     )
   ] });
 };
+const MemoColumnHeaderFilter = React.memo(
+  ColumnHeaderFilter,
+  (prevProps, nextProps) => JSON.stringify(prevProps.memo) === JSON.stringify(nextProps.memo)
+);
 exports.ColumnHeaderFilter = ColumnHeaderFilter;
+exports.MemoColumnHeaderFilter = MemoColumnHeaderFilter;

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/useColumns.cjs

@@ -8,11 +8,11 @@ const React = require("react");
 const useApi = require("../../../../hooks/api/useApi.cjs");
 const useAuth = require("../../../../hooks/auth/useAuth.cjs");
 const utils$1 = require("../../utils.cjs");
-const Body = require("./Body.cjs");
+const Cell = require("./Cell.cjs");
 const ColumnHeaderFilter = require("./ColumnHeaderFilter.cjs");
 const HeaderAdvancedFiltersMenuButton = require("./HeaderAdvancedFiltersMenuButton.cjs");
-function useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters) {
-  const { path, info, data, specialKey } = useApi.useApi();
+function useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters, memo) {
+  const { path, info, queryParams, data, specialKey } = useApi.useApi();
   const api = useApi.useApi();
   const auth = useAuth.useAuth();
   const idValueMap = hooks.useMap();
@@ -58,28 +58,69 @@ function useColumns(columnProps, header, body, textFilterSeparator, enableAdvanc
           ] });
         } : void 0,
         filterTooltipValueFn: (value) => idValueMap.get(`${data == null ? void 0 : data.path}-${col}-${value}`) ?? value,
-        Filter: (props) => enableAdvancedFilters ? null : /* @__PURE__ */ jsxRuntime.jsx(
-          ColumnHeaderFilter.ColumnHeaderFilter,
-          {
-            enableFilterModes,
-            filters,
-            filterFn,
-            filterProps,
-            filterState,
-            filterSync,
-            filterMenu,
-            filterModeDescription,
-            updateQueryParams,
-            withLocalStorage,
-            localStorageKey,
-            mrtProps: props,
-            children: filterComponent
-          }
-        ),
+        Filter: (props) => {
+          var _a2, _b2;
+          return enableAdvancedFilters ? null : memo === true || memo === "filters" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ColumnHeaderFilter.MemoColumnHeaderFilter,
+            {
+              enableFilterModes,
+              filters,
+              filterFn,
+              filterProps,
+              filterState,
+              filterSync,
+              filterMenu,
+              filterModeDescription,
+              updateQueryParams,
+              withLocalStorage,
+              localStorageKey,
+              mrtProps: props,
+              memo: {
+                columnFilterValue: props.column.getFilterValue(),
+                filterStateValues: [
+                  props.column.getFilterValue(),
+                  filterState == null ? void 0 : filterState.value,
+                  updateQueryParams ? (_b2 = (_a2 = queryParams == null ? void 0 : queryParams.filters) == null ? void 0 : _a2.find((qpFilter) => qpFilter.id === props.column.id)) == null ? void 0 : _b2.value : void 0
+                ]
+              },
+              children: filterComponent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ColumnHeaderFilter.ColumnHeaderFilter,
+            {
+              enableFilterModes,
+              filters,
+              filterFn,
+              filterProps,
+              filterState,
+              filterSync,
+              filterMenu,
+              filterModeDescription,
+              updateQueryParams,
+              withLocalStorage,
+              localStorageKey,
+              mrtProps: props,
+              children: filterComponent
+            }
+          );
+        },
         enableSorting: data == null ? void 0 : data.order_columns.includes(col),
         filterFn: filters.length ? filterFn : void 0,
         columnFilterModeOptions: filters.map((f) => utils$1.fromFilterToFilterFn(col, f.operator)),
-        Cell: (props) => /* @__PURE__ */ jsxRuntime.jsx(Body.Body, { body, col, textFilterSeparator, mrtProps: props }),
+        Cell: (props) => memo === true || memo === "cells" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Cell.MemoCell,
+          {
+            body,
+            col,
+            textFilterSeparator,
+            mrtProps: props,
+            memo: {
+              globalFilter: props.table.getState().globalFilter,
+              columnFilterValue: props.column.getFilterValue(),
+              cellValue: props.cell.getValue()
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { body, col, textFilterSeparator, mrtProps: props }),
         ...additionalProps,
         ...utils.mergeProps(columnProps, specialKey.all, col)
       };
@@ -92,11 +133,13 @@ function useColumns(columnProps, header, body, textFilterSeparator, enableAdvanc
       info == null ? void 0 : info.filters,
       header,
       specialKey.all,
+      enableAdvancedFilters,
       columnProps,
       api,
       auth,
       idValueMap,
-      enableAdvancedFilters,
+      memo,
+      queryParams == null ? void 0 : queryParams.filters,
       body,
       textFilterSeparator
     ]

package/dist/core/cjs/_virtual/_commonjsHelpers.cjs

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
+exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/core/cjs/_virtual/lodash.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lodash = require("../../../.external/cjs/lodash@4.17.21/lodash/lodash.cjs");
+var lodashExports = lodash.__require();
+exports.lodashExports = lodashExports;

package/dist/core/cjs/_virtual/lodash2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var lodash = { exports: {} };
+exports.__module = lodash;

package/dist/core/esm/ActionIcons/Edit/EditDialog.mjs

@@ -3,7 +3,8 @@ import { DEBOUNCE_LOADING_DELAY, initialState, VIEW_MODE } from "fastapi-rtk/con
 import { deepMerge, getItemId } from "fastapi-rtk/utils";
 import { useProps } from "@mantine/core";
 import { useDebouncedState } from "@mantine/hooks";
-import { useMemo, useCallback, useEffect } from "react";
+import { l as lodashExports } from "../../_virtual/lodash.mjs";
+import { useMemo, useRef, useEffect, useCallback } from "react";
 import { convertToFormInputs } from "../../fab-react-toolkit-patch/utils/convertToFormInputs.mjs";
 import { useApi } from "../../hooks/api/useApi.mjs";
 import { useForms } from "../../hooks/api/useForms.mjs";
@@ -21,11 +22,31 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     () => deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
     [_jsonForms, __jsonForms]
   );
+  const { fab } = useInfo();
+  const initialState$1 = useMemo(
+    () => ({
+      ...initialState,
+      data: fab ? convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1((item == null ? void 0 : item.result) || {}, info.edit_schema)
+    }),
+    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
+  );
+  const initialStateRef = useRef(initialState$1);
+  useEffect(() => {
+    setState({ data: initialState$1.data });
+    initialStateRef.current = initialState$1;
+  }, [initialState$1, setState]);
   const onSubmit = useCallback(
     (e) => {
       e == null ? void 0 : e.preventDefault();
       setLoading(true);
-      updateEntry(getItemId(getItem()), getState().data).then((res) => {
+      const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
+        if (lodashExports.isEqual(value, initialStateRef.current.data[key])) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      }, {});
+      updateEntry(getItemId(getItem()), new_data).then((res) => {
         if (res) {
           refetch();
           refetchInfo();
@@ -38,17 +59,6 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     },
     [setLoading, updateEntry, getItem, getState, refetch, refetchInfo, setOpened]
   );
-  const { fab } = useInfo();
-  const initialState$1 = useMemo(
-    () => ({
-      ...initialState,
-      data: fab ? convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1((item == null ? void 0 : item.result) || {}, info.edit_schema)
-    }),
-    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
-  );
-  useEffect(() => {
-    setState({ data: initialState$1.data });
-  }, [initialState$1, setState]);
   return /* @__PURE__ */ jsx(
     CommonModal,
     {

package/dist/core/esm/ActionIcons/Modals/CommonModal.mjs

@@ -22,6 +22,7 @@ function CommonModal({
   boxProps,
   buttonText,
   buttonLoading,
+  withTitleOptions = true,
   ...props
 }) {
   var _a;
@@ -55,7 +56,7 @@ function CommonModal({
       ...props,
       title: /* @__PURE__ */ jsxs(Fragment, { children: [
         props.title,
-        !fab && //* Backward compatibility to fab-react-toolkit
+        !fab && withTitleOptions && //* Backward compatibility to fab-react-toolkit
         /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", pr: "xs", children: [
           /* @__PURE__ */ jsx(
             CloseButton,

package/dist/core/esm/Tables/NextGenDataGrid/NextGenDataGrid.mjs

@@ -26,7 +26,7 @@ import { useToolbarAlertBanner } from "./hooks/useToolbarAlertBanner/useToolbarA
 const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
 const NextGenDataGrid = forwardRef((props, ref) => {
   var _a, _b, _c;
-  const { info, data, queryParams, refetch, specialKey } = useApi();
+  const { info, data, queryParams, setQueryParams, refetch, specialKey } = useApi();
   const propsFromMantineTheme = useProps("NextGenDataGrid", {}, {});
   const {
     children,
@@ -52,6 +52,8 @@ const NextGenDataGrid = forwardRef((props, ref) => {
     textFilterSeparator = ";",
     enableAdvancedFilters,
     wrapperProps,
+    memo,
+    queryOnlyVisibleColumns,
     // Deprecated props
     bodySeparator,
     bodyTruncate,
@@ -134,7 +136,7 @@ const NextGenDataGrid = forwardRef((props, ref) => {
   const dataProps = useData();
   const sortingProps = useSorting();
   const paginationProps = usePagination(hidePagination);
-  const columnsProps = useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters);
+  const columnsProps = useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters, memo);
   const sizeProps = useSize(withBorder);
   const actionsProps = useActions(hideActions, (_a = mergeProps(body, specialKey.actions)) == null ? void 0 : _a.component);
   const globalFilterProps = useGlobalFilter();
@@ -189,6 +191,18 @@ const NextGenDataGrid = forwardRef((props, ref) => {
     onSelectCheckbox == null ? void 0 : onSelectCheckbox(Object.keys(mrtTable.getState().rowSelection));
     bulkActions == null ? void 0 : bulkActions.setSelectedIds(Object.keys(mrtTable.getState().rowSelection));
   }, [bulkActions, data == null ? void 0 : data.ids, mrtTable.getState().rowSelection, onSelectCheckbox]);
+  useEffect(() => {
+    if (!queryOnlyVisibleColumns || !(data == null ? void 0 : data.list_columns)) {
+      return;
+    }
+    const columnVisibility = mrtTable.getState().columnVisibility;
+    const visibleColumns = mrtTable.getAllColumns().filter((col) => columnVisibility[col.id] !== false).filter((col) => data.list_columns.includes(col.id));
+    if (data.list_columns.length === visibleColumns.length) {
+      setQueryParams({ columns: [] });
+      return;
+    }
+    setQueryParams({ columns: visibleColumns.map((col) => col.id) });
+  }, [mrtTable.getState().columnVisibility, setQueryParams]);
   const { setView: setViewAdd } = useForms("add");
   const { setView: setViewEdit } = useForms("edit");
   useEffect(() => {

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/{Body.mjs → Cell.mjs}

@@ -1,16 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { mergeProps, parseFromValuesOrFunc } from "fastapi-rtk/utils";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { useApi } from "../../../../hooks/api/useApi.mjs";
 import { useAuth } from "../../../../hooks/auth/useAuth.mjs";
 import { FallbackWrapper } from "../../FallbackWrapper.mjs";
 import { MultiLineHighlight } from "./MultiLineHighlight.mjs";
-const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
+const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
   const { table, column, cell } = mrtProps;
   const api = useApi();
   const auth = useAuth();
   const { specialKey } = useApi();
-  const { component, separator, truncate, tooltipProps, highlightProps } = mergeProps(body, specialKey.all, col);
+  const colProps = mergeProps(body, specialKey.all, col);
+  const { component, separator, truncate, highlight: _highlight, tooltipProps, highlightProps } = colProps;
+  let functionProps = { api, auth, data: cell.row.original, colProps, mrtProps };
   const highlights = useMemo(() => {
     const globalFilter = table.getState().globalFilter;
     const columnTextFilter = column.getFilterValue();
@@ -21,8 +23,12 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
     if (columnTextFilter && typeof columnTextFilter === "string") {
       highlights2.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
     }
+    if (_highlight) {
+      const extraHighlight = parseFromValuesOrFunc(_highlight, functionProps);
+      highlights2.push(...Array.isArray(extraHighlight) ? extraHighlight : [extraHighlight]);
+    }
     return highlights2;
-  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator]);
+  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator, _highlight]);
   const cellObj = useMemo(() => {
     const result = { value: cell.getValue(), truncate: {}, highlight: [] };
     if (typeof result.value === "number") {
@@ -50,6 +56,7 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
     return result;
   }, [cell.getValue(), separator, truncate]);
   const highlight = useMemo(() => [...highlights, ...cellObj.highlight], [highlights, cellObj.highlight]);
+  functionProps = { ...functionProps, highlight, cell: cellObj, componentProps: { value: cellObj.value } };
   return /* @__PURE__ */ jsx(
     FallbackWrapper,
     {
@@ -58,27 +65,21 @@ const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
         {
           highlight,
           truncate: cellObj.truncate,
-          tooltipProps: parseFromValuesOrFunc(tooltipProps, { value: cellObj.value, data: cell.row.original, cellObj }),
-          highlightProps: parseFromValuesOrFunc(highlightProps, {
-            value: cellObj.value,
-            data: cell.row.original,
-            cellObj
-          }),
+          tooltipProps: parseFromValuesOrFunc(tooltipProps, { ...functionProps.componentProps, functionProps }),
+          highlightProps: parseFromValuesOrFunc(highlightProps, { ...functionProps.componentProps, functionProps }),
           children: cellObj.value
         }
       ),
-      functionProps: {
-        api,
-        auth,
-        data: cell.row.original,
-        highlight,
-        componentProps: { value: cellObj.value },
-        mrtProps
-      },
+      functionProps,
       children: component
     }
   );
 };
+const MemoCell = memo(
+  Cell,
+  (prevProps, nextProps) => JSON.stringify(prevProps.memo) === JSON.stringify(nextProps.memo)
+);
 export {
-  Body
+  Cell,
+  MemoCell
 };

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilter.mjs

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Flex } from "@mantine/core";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { useApi } from "../../../../hooks/api/useApi.mjs";
 import { useAuth } from "../../../../hooks/auth/useAuth.mjs";
 import { fromFilterFnToFilter } from "../../utils.mjs";
@@ -84,6 +84,11 @@ const ColumnHeaderFilter = ({
     )
   ] });
 };
+const MemoColumnHeaderFilter = memo(
+  ColumnHeaderFilter,
+  (prevProps, nextProps) => JSON.stringify(prevProps.memo) === JSON.stringify(nextProps.memo)
+);
 export {
-  ColumnHeaderFilter
+  ColumnHeaderFilter,
+  MemoColumnHeaderFilter
 };

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/useColumns.mjs

@@ -6,11 +6,11 @@ import { useEffect, useMemo } from "react";
 import { useApi } from "../../../../hooks/api/useApi.mjs";
 import { useAuth } from "../../../../hooks/auth/useAuth.mjs";
 import { fromFilterToFilterFn } from "../../utils.mjs";
-import { Body } from "./Body.mjs";
-import { ColumnHeaderFilter } from "./ColumnHeaderFilter.mjs";
+import { MemoCell, Cell } from "./Cell.mjs";
+import { MemoColumnHeaderFilter, ColumnHeaderFilter } from "./ColumnHeaderFilter.mjs";
 import { HeaderAdvancedFiltersMenuButton } from "./HeaderAdvancedFiltersMenuButton.mjs";
-function useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters) {
-  const { path, info, data, specialKey } = useApi();
+function useColumns(columnProps, header, body, textFilterSeparator, enableAdvancedFilters, memo) {
+  const { path, info, queryParams, data, specialKey } = useApi();
   const api = useApi();
   const auth = useAuth();
   const idValueMap = useMap();
@@ -56,28 +56,69 @@ function useColumns(columnProps, header, body, textFilterSeparator, enableAdvanc
           ] });
         } : void 0,
         filterTooltipValueFn: (value) => idValueMap.get(`${data == null ? void 0 : data.path}-${col}-${value}`) ?? value,
-        Filter: (props) => enableAdvancedFilters ? null : /* @__PURE__ */ jsx(
-          ColumnHeaderFilter,
-          {
-            enableFilterModes,
-            filters,
-            filterFn,
-            filterProps,
-            filterState,
-            filterSync,
-            filterMenu,
-            filterModeDescription,
-            updateQueryParams,
-            withLocalStorage,
-            localStorageKey,
-            mrtProps: props,
-            children: filterComponent
-          }
-        ),
+        Filter: (props) => {
+          var _a2, _b2;
+          return enableAdvancedFilters ? null : memo === true || memo === "filters" ? /* @__PURE__ */ jsx(
+            MemoColumnHeaderFilter,
+            {
+              enableFilterModes,
+              filters,
+              filterFn,
+              filterProps,
+              filterState,
+              filterSync,
+              filterMenu,
+              filterModeDescription,
+              updateQueryParams,
+              withLocalStorage,
+              localStorageKey,
+              mrtProps: props,
+              memo: {
+                columnFilterValue: props.column.getFilterValue(),
+                filterStateValues: [
+                  props.column.getFilterValue(),
+                  filterState == null ? void 0 : filterState.value,
+                  updateQueryParams ? (_b2 = (_a2 = queryParams == null ? void 0 : queryParams.filters) == null ? void 0 : _a2.find((qpFilter) => qpFilter.id === props.column.id)) == null ? void 0 : _b2.value : void 0
+                ]
+              },
+              children: filterComponent
+            }
+          ) : /* @__PURE__ */ jsx(
+            ColumnHeaderFilter,
+            {
+              enableFilterModes,
+              filters,
+              filterFn,
+              filterProps,
+              filterState,
+              filterSync,
+              filterMenu,
+              filterModeDescription,
+              updateQueryParams,
+              withLocalStorage,
+              localStorageKey,
+              mrtProps: props,
+              children: filterComponent
+            }
+          );
+        },
         enableSorting: data == null ? void 0 : data.order_columns.includes(col),
         filterFn: filters.length ? filterFn : void 0,
         columnFilterModeOptions: filters.map((f) => fromFilterToFilterFn(col, f.operator)),
-        Cell: (props) => /* @__PURE__ */ jsx(Body, { body, col, textFilterSeparator, mrtProps: props }),
+        Cell: (props) => memo === true || memo === "cells" ? /* @__PURE__ */ jsx(
+          MemoCell,
+          {
+            body,
+            col,
+            textFilterSeparator,
+            mrtProps: props,
+            memo: {
+              globalFilter: props.table.getState().globalFilter,
+              columnFilterValue: props.column.getFilterValue(),
+              cellValue: props.cell.getValue()
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Cell, { body, col, textFilterSeparator, mrtProps: props }),
         ...additionalProps,
         ...mergeProps(columnProps, specialKey.all, col)
       };
@@ -90,11 +131,13 @@ function useColumns(columnProps, header, body, textFilterSeparator, enableAdvanc
       info == null ? void 0 : info.filters,
       header,
       specialKey.all,
+      enableAdvancedFilters,
       columnProps,
       api,
       auth,
       idValueMap,
-      enableAdvancedFilters,
+      memo,
+      queryParams == null ? void 0 : queryParams.filters,
       body,
       textFilterSeparator
     ]

package/dist/core/esm/_virtual/_commonjsHelpers.mjs

@@ -1,6 +1,8 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 export {
+  commonjsGlobal,
   getDefaultExportFromCjs
 };

package/dist/core/esm/_virtual/lodash.mjs

@@ -0,0 +1,5 @@
+import { __require as requireLodash } from "../../../.external/esm/lodash@4.17.21/lodash/lodash.mjs";
+var lodashExports = requireLodash();
+export {
+  lodashExports as l
+};

package/dist/core/esm/_virtual/lodash2.mjs

@@ -0,0 +1,4 @@
+var lodash = { exports: {} };
+export {
+  lodash as __module
+};

package/dist/core/lib/ActionIcons/Modals/CommonModal.d.ts

@@ -1,15 +1,38 @@
-export function CommonModal({ fabSchema, schema, uischema, state, setState, view, setView, jsonForms, onSubmit, boxProps, buttonText, buttonLoading, ...props }: {
-    [x: string]: any;
-    fabSchema: any;
-    schema: any;
-    uischema: any;
-    state: any;
-    setState: any;
-    view: any;
-    setView: any;
-    jsonForms: any;
-    onSubmit: any;
-    boxProps: any;
-    buttonText: any;
-    buttonLoading: any;
+/**
+ * CommonModal component renders a modal with a form.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Record<string, any>} props.fabSchema - Schema for backward compatibility with fab-react-toolkit that includes defaultValues and validation schema.
+ * @param {Record<string, any>} props.schema - JSON Schema used by JsonFormsWithCustomizer.
+ * @param {Record<string, any>} props.uischema - UI schema for customizing the form layout.
+ * @param {Record<string, any>} props.state - State object containing the form data.
+ * @param {Function} props.setState - Function to update the state containing form data.
+ * @param {string} props.view - Current view mode (e.g., VIEW_MODE.NORMAL, VIEW_MODE.FULL_SCREEN, VIEW_MODE.OVERLAY).
+ * @param {Function} props.setView - Function to update the view mode.
+ * @param {Record<string, any>} props.jsonForms - Customizer configuration or additional properties for JsonFormsWithCustomizer.
+ * @param {Function} props.onSubmit - Callback function triggered on form submission.
+ * @param {Record<string, any>} props.boxProps - Additional properties to be passed to the Box component wrapping the form.
+ * @param {string} props.buttonText - Text displayed on the submit button.
+ * @param {boolean} props.buttonLoading - Indicates whether the submit button should display a loading state.
+ * @param {boolean} [props.withTitleOptions=true] - Flag to determine if title options (e.g., full screen, overlay toggles) should be displayed.
+ * @param {Record<string, any>} props.rest - Additional props to be passed to the Modal component.
+ *
+ * @returns - A rendered Modal component with an embedded form and optional title controls.
+ */
+export function CommonModal({ fabSchema, schema, uischema, state, setState, view, setView, jsonForms, onSubmit, boxProps, buttonText, buttonLoading, withTitleOptions, ...props }: {
+    fabSchema: Record<string, any>;
+    schema: Record<string, any>;
+    uischema: Record<string, any>;
+    state: Record<string, any>;
+    setState: Function;
+    view: string;
+    setView: Function;
+    jsonForms: Record<string, any>;
+    onSubmit: Function;
+    boxProps: Record<string, any>;
+    buttonText: string;
+    buttonLoading: boolean;
+    withTitleOptions?: boolean;
+    rest: Record<string, any>;
 }): import("react").JSX.Element;

package/dist/core/lib/Tables/NextGenDataGrid/NextGenDataGrid.d.ts

@@ -32,6 +32,82 @@ export type NextGenDataGridFilterSyncProps = {
      */
     delay?: number;
 };
+export type NextGenDataGridBodyCellHighlightProps = {
+    /**
+     * - API instance
+     */
+    api: Record<string, any>;
+    /**
+     * - Auth instance
+     */
+    auth: Record<string, any>;
+    /**
+     * - Row data
+     */
+    data: Record<string, any>;
+    /**
+     * - Column properties
+     */
+    colProps: Record<string, any>;
+    /**
+     * - MantineReactTable props
+     */
+    mrtProps: Record<string, any>;
+};
+export type NextGenDataGridBodyCellCellProps = {
+    /**
+     * - The value of the cell, either `string` or `string[]`
+     */
+    value: string | string[];
+    /**
+     * - The truncate object containing the original and truncated value
+     */
+    truncate: Record<string, any>;
+    /**
+     * - The highlight keywords to highlight in the cell value
+     */
+    highlight: string[];
+};
+export type NextGenDataGridBodyCellComponentProps = {
+    /**
+     * - The value of the cell, either `string` or `string[]`
+     */
+    value: string | string[];
+};
+export type NextGenDataGridBodyCellProps = {
+    /**
+     * - API instance
+     */
+    api: Record<string, any>;
+    /**
+     * - Auth instance
+     */
+    auth: Record<string, any>;
+    /**
+     * - Row data
+     */
+    data: Record<string, any>;
+    /**
+     * - Column properties
+     */
+    colProps: Record<string, any>;
+    /**
+     * - MantineReactTable props
+     */
+    mrtProps: Record<string, any>;
+    /**
+     * - Array of highlight keywords
+     */
+    highlights: string[];
+    /**
+     * - The cell object containing the value, truncate and highlight
+     */
+    cell: NextGenDataGridBodyCellCellProps;
+    /**
+     * - Props for the cell component
+     */
+    componentProps: NextGenDataGridBodyCellComponentProps;
+};
 export type NextGenDataGridHeaderProps = {
     /**
      * - Customize the header that is shown above the filter
@@ -88,7 +164,7 @@ export type NextGenDataGridBodyProps = {
     /**
      * - Customize the component within the body
      */
-    component?: JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element);
+    component?: JSX.Element | ((props: NextGenDataGridBodyCellProps) => JSX.Element);
     /**
      * - Separate the value of a column into multiple rows
      */
@@ -97,14 +173,18 @@ export type NextGenDataGridBodyProps = {
      * - Truncate the value of a column to a certain length. Will be shown as `...` when it exceeds the length with a tooltip containing the full value
      */
     truncate?: number;
+    /**
+     * - Additional highlight keywords to highlight in the cell value. Can be a string, an array of strings, or a function that returns a string or an array of strings
+     */
+    highlight?: string | string[] | ((props: NextGenDataGridBodyCellHighlightProps) => string | string[]);
     /**
      * - Props for the tooltip component that is shown when the value is truncated. The `value` is the value of the cell, either `string` or `string[]`, `data` is the row data, and `cellObj` is the cell object containing the value, truncate and highlight
      */
-    tooltipProps?: Record<string, any> | (({ value, data, cellObj }: any) => Record<string, any>);
+    tooltipProps?: Record<string, any> | ((props: NextGenDataGridBodyCellProps & NextGenDataGridBodyCellComponentProps) => Record<string, any>);
     /**
      * - Props for the highlight component. The `value` is the value of the cell, either `string` or `string[]`, `data` is the row data, and `cellObj` is the cell object containing the value, truncate and highlight
      */
-    highlightProps?: Record<string, any> | (({ value, data, cellObj }: any) => Record<string, any>);
+    highlightProps?: Record<string, any> | ((props: NextGenDataGridBodyCellProps & NextGenDataGridBodyCellComponentProps) => Record<string, any>);
 };
 export type NextGenDataGridProps = {
     /**
@@ -197,9 +277,17 @@ export type NextGenDataGridProps = {
     enableAdvancedFilters?: boolean;
     /**
      * - Wrapper props for the table
-     * Deprecated props
      */
     wrapperProps?: Record<string, any>;
+    /**
+     * - Whether to memoize the filters and body cells. If `true`, both filters and body cells will be memoized. If `'filters'`, only filters will be memoized. If `'cells'`, only body cells will be memoized. Defaults to `false` (no memoization)
+     */
+    memo?: boolean | "filters" | "cells";
+    /**
+     * - Whether to only query the visible columns from the backend. When enabled, it modifies the `columns` from the `queryParams` to only include the visible columns. Defaults to `false`
+     * Deprecated props
+     */
+    queryOnlyVisibleColumns?: boolean;
     /**
      * - Body separator for the table
      */

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/Cell.d.ts

@@ -0,0 +1,12 @@
+export function Cell({ body, col, textFilterSeparator, mrtProps }: {
+    body: any;
+    col: any;
+    textFilterSeparator: any;
+    mrtProps: any;
+}): import("react").JSX.Element;
+export const MemoCell: import('react').MemoExoticComponent<({ body, col, textFilterSeparator, mrtProps }: {
+    body: any;
+    col: any;
+    textFilterSeparator: any;
+    mrtProps: any;
+}) => import("react").JSX.Element>;

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilter.d.ts

@@ -13,3 +13,18 @@ export function ColumnHeaderFilter({ children, enableFilterModes, filters, filte
     localStorageKey: any;
     mrtProps: any;
 }): import("react").JSX.Element;
+export const MemoColumnHeaderFilter: import('react').MemoExoticComponent<({ children, enableFilterModes, filters, filterFn, filterProps, filterState, filterSync, filterMenu, filterModeDescription, updateQueryParams, withLocalStorage, localStorageKey, mrtProps, }: {
+    children: any;
+    enableFilterModes: any;
+    filters: any;
+    filterFn: any;
+    filterProps: any;
+    filterState: any;
+    filterSync: any;
+    filterMenu: any;
+    filterModeDescription: any;
+    updateQueryParams: any;
+    withLocalStorage: any;
+    localStorageKey: any;
+    mrtProps: any;
+}) => import("react").JSX.Element>;

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/useColumns.d.ts

@@ -1,4 +1,4 @@
-export function useColumns(columnProps: any, header: any, body: any, textFilterSeparator: any, enableAdvancedFilters: any): {
+export function useColumns(columnProps: any, header: any, body: any, textFilterSeparator: any, enableAdvancedFilters: any, memo: any): {
     columns: any;
     manualFiltering: boolean;
 };

package/dist/jsonforms/cjs/MantineInputs/MantineDateTimeInput.cjs

@@ -26,7 +26,7 @@ function MantineDateTimeInput({ margin, ...props }) {
     }
   }, [data, setToLocal, setToUTC]);
   const componentProps = React.useMemo(() => ({ ...commonProps, ...dateProps }), [commonProps, dateProps]);
-  const [Component, _props] = useContextProps.useContextProps("DateTime", path, componentProps, props);
+  const [Component, { initialUTC: _, ..._props }] = useContextProps.useContextProps("DateTime", path, componentProps, props);
   if (!props.visible) {
     return null;
   }

package/dist/jsonforms/esm/MantineInputs/MantineDateTimeInput.mjs

@@ -24,7 +24,7 @@ function MantineDateTimeInput({ margin, ...props }) {
     }
   }, [data, setToLocal, setToUTC]);
   const componentProps = useMemo(() => ({ ...commonProps, ...dateProps }), [commonProps, dateProps]);
-  const [Component, _props] = useContextProps("DateTime", path, componentProps, props);
+  const [Component, { initialUTC: _, ..._props }] = useContextProps("DateTime", path, componentProps, props);
   if (!props.visible) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fastapi-rtk",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "private": false,
   "description": "A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.",
   "license": "MIT",

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/Body.d.ts

@@ -1,6 +0,0 @@
-export function Body({ body, col, textFilterSeparator, mrtProps }: {
-    body: any;
-    col: any;
-    textFilterSeparator: any;
-    mrtProps: any;
-}): import("react").JSX.Element;