mantine-datatable-extended 0.3.1 → 0.4.0

package/README.md

@@ -15,11 +15,11 @@ Mantine and Mantine DataTable are excellent libraries, trusted and used by many
 
 ### 🎯 Standardized Components
 
-- **DteSearch**: Search with multi-column selection
-- **DteFilter**: Filter data with various filter types (text, number, date, select, range...)
-- **DteSortList**: Sort by multiple columns simultaneously
-- **DteColumnsToggle**: Show/hide columns
-- **DtePagination**: Flexible pagination that can be placed anywhere
+- **MDESearch**: Search with multi-column selection
+- **MDEFilter**: Filter data with various filter types (text, number, date, select, range...)
+- **MDESortList**: Sort by multiple columns simultaneously
+- **MDEColumnsToggle**: Show/hide columns
+- **MDEPagination**: Flexible pagination that can be placed anywhere
 
 ### 🔗 URL State Management
 
@@ -91,19 +91,19 @@ export default function RootLayout({ children }) {
 "use client";
 
 import {
-  DteExtended,
-  DteProvider,
-  DteSearch,
-  DteFilter,
-  DteSortList,
-  DteColumnsToggle,
-  DtePagination,
-  type TDteColumnProps,
+  MantineDatatableExtended,
+  MDEProvider,
+  MDESearch,
+  MDEFilter,
+  MDESortList,
+  MDEColumnsToggle,
+  MDEPagination,
+  type TMDEColumnProps,
 } from "mantine-datatable-extended";
 import { useDataTableColumns } from "mantine-datatable";
 import { Group, Space } from "@mantine/core";
 
-const columns: TDteColumnProps[] = [
+const columns: TMDEColumnProps[] = [
   {
     accessor: "name",
     title: "Name",
@@ -124,27 +124,27 @@ export default function MyTable() {
   });
 
   return (
-    <DteProvider
+    <MDEProvider
       columns={columns}
       originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
       storeColumnsKey="my-table"
     >
       <Group justify="space-between">
         <Group>
-          <DteSearch />
-          <DteFilter />
+          <MDESearch />
+          <MDEFilter />
         </Group>
         <Group>
-          <DteSortList />
-          <DteColumnsToggle />
+          <MDESortList />
+          <MDEColumnsToggle />
         </Group>
       </Group>
 
       <Space h="md" />
-      <DteExtended records={data} />
+      <MantineDatatableExtended records={data} />
       <Space h="md" />
-      <DtePagination />
-    </DteProvider>
+      <MDEPagination />
+    </MDEProvider>
   );
 }
 ```

package/dist/chunk-EDD26HQ2.mjs

@@ -0,0 +1 @@
+import {z}from'zod';var t={ASC:"asc",DESC:"desc"},r={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var c=z.object({accessor:z.string(),direction:z.enum(t)}),i=z.object({accessors:z.array(z.string()),value:z.string()}),n=z.object({variant:z.enum(r),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});var l={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},E={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},S=[10,20,30,40,50],T=0,g={view:{columnsToggle:"Columns Toggle",columnsToggleSearchPlaceholder:"Search columns\u2026"},sort:{sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"},search:{search:"Search",searchAccessorsSearchPlaceholder:"Search columns\u2026"},filter:{resetFilter:"Reset Filters"},pagination:{rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]}};export{t as a,r as b,c,i as d,n as e,l as f,E as g,S as h,T as i,g as j};

package/dist/{data-table-provider.type-dlzY73EE.d.ts → data-table-provider.type-DPvItGHz.d.ts}

@@ -2,6 +2,50 @@ import * as react from 'react';
 import { DataTableColumn, useDataTableColumns } from 'mantine-datatable';
 import { z } from 'zod';
 
+declare const sortSchema: z.ZodObject<{
+    accessor: z.ZodString;
+    direction: z.ZodEnum<{
+        readonly ASC: "asc";
+        readonly DESC: "desc";
+    }>;
+}, z.core.$strip>;
+type TSortCondition = z.infer<typeof sortSchema>;
+declare const searchSchema: z.ZodObject<{
+    accessors: z.ZodArray<z.ZodString>;
+    value: z.ZodString;
+}, z.core.$strip>;
+type TSearchCondition = z.infer<typeof searchSchema>;
+declare const filterSchema: z.ZodObject<{
+    variant: z.ZodEnum<{
+        readonly TEXT: "text";
+        readonly NUMBER: "number";
+        readonly NUMBER_RANGE: "number_range";
+        readonly DATE: "date";
+        readonly DATE_RANGE: "date_range";
+        readonly SINGLE_SELECT: "single_select";
+        readonly MULTI_SELECT: "multi_select";
+    }>;
+    accessor: z.ZodString;
+    value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+}, z.core.$strip>;
+type TFilterCondition = z.infer<typeof filterSchema>;
+
+/**
+ * Hook signature for a single query param: returns [value, setter].
+ */
+type TQueryParamHook<T> = (key: string, defaultValue: T) => readonly [T, (value: T) => void];
+/**
+ * Adapter interface for query params state management.
+ * Implement this to use different backends (nuqs, localStorage, memory, etc.).
+ */
+type TQueryParamsAdapter = {
+    usePage: TQueryParamHook<number>;
+    usePageSize: TQueryParamHook<number>;
+    useSorts: TQueryParamHook<TSortCondition[]>;
+    useSearch: TQueryParamHook<TSearchCondition>;
+    useFilters: TQueryParamHook<TFilterCondition[]>;
+};
+
 /**
  * Options for multi-select filter variant.
  */
@@ -66,7 +110,7 @@ type TFilterableExtend = TBaseExtend & ({
  * Extended column props for DataTable with search, sort, and filter support.
  * Extends mantine-datatable's DataTableColumn with an optional `extend` property.
  */
-type TDteColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, "sortable" | "sortKey" | "filter" | "filterPopoverProps" | "filterPopoverDisableClickOutside" | "filtering" | "ellipsis" | "noWrap"> & {
+type TMDEColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, "sortable" | "sortKey" | "filter" | "filterPopoverProps" | "filterPopoverDisableClickOutside" | "filtering" | "ellipsis" | "noWrap"> & {
     /**
      * The extended properties of the column.
      */
@@ -89,35 +133,7 @@ type TDteColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, "so
     noWrap?: boolean;
 });
 
-declare const sortSchema: z.ZodObject<{
-    accessor: z.ZodString;
-    direction: z.ZodEnum<{
-        readonly ASC: "asc";
-        readonly DESC: "desc";
-    }>;
-}, z.core.$strip>;
-type TSortCondition = z.infer<typeof sortSchema>;
-declare const searchSchema: z.ZodObject<{
-    accessors: z.ZodArray<z.ZodString>;
-    value: z.ZodString;
-}, z.core.$strip>;
-type TSearchCondition = z.infer<typeof searchSchema>;
-declare const filterSchema: z.ZodObject<{
-    variant: z.ZodEnum<{
-        readonly TEXT: "text";
-        readonly NUMBER: "number";
-        readonly NUMBER_RANGE: "number_range";
-        readonly DATE: "date";
-        readonly DATE_RANGE: "date_range";
-        readonly SINGLE_SELECT: "single_select";
-        readonly MULTI_SELECT: "multi_select";
-    }>;
-    accessor: z.ZodString;
-    value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
-}, z.core.$strip>;
-type TFilterCondition = z.infer<typeof filterSchema>;
-
-type TDteViewOptions = {
+type TMDEViewOptions = {
     /**
      * The label for the columns toggle button.
      */
@@ -127,7 +143,7 @@ type TDteViewOptions = {
      */
     columnsToggleSearchPlaceholder: string;
 };
-type TDteSortOptions = {
+type TMDESortOptions = {
     /**
      * The label for the sort button.
      */
@@ -149,7 +165,7 @@ type TDteSortOptions = {
      */
     desc: string;
 };
-type TDteSearchOptions = {
+type TMDESearchOptions = {
     /**
      * The label for the search input placeholder.
      */
@@ -159,13 +175,13 @@ type TDteSearchOptions = {
      */
     searchAccessorsSearchPlaceholder: string;
 };
-type TDteFilterOptions = {
+type TMDEFilterOptions = {
     /**
      * The label for the reset filter button.
      */
     resetFilter: string;
 };
-type TDtePaginationOptions = {
+type TMDEPaginationOptions = {
     /**
      * The label for the rows per page.
      */
@@ -188,23 +204,23 @@ type TDtePaginationOptions = {
  * Unified i18n type for all DataTable components.
  * Grouped by component - full type stored in context (after merging with defaults).
  */
-type TDteI18n = {
-    view: TDteViewOptions;
-    sort: TDteSortOptions;
-    search: TDteSearchOptions;
-    filter: TDteFilterOptions;
-    pagination: TDtePaginationOptions;
+type TMDEI18n = {
+    view: TMDEViewOptions;
+    sort: TMDESortOptions;
+    search: TMDESearchOptions;
+    filter: TMDEFilterOptions;
+    pagination: TMDEPaginationOptions;
 };
 /**
- * Input type for i18n prop in DteProvider.
+ * Input type for i18n prop in MDEProvider.
  * Each group is optional - only override the keys you need.
  */
-type TDteI18nInput = {
-    view?: Partial<TDteViewOptions>;
-    sort?: Partial<TDteSortOptions>;
-    search?: Partial<TDteSearchOptions>;
-    filter?: Partial<TDteFilterOptions>;
-    pagination?: Partial<TDtePaginationOptions>;
+type TMDEI18nInput = {
+    view?: Partial<TMDEViewOptions>;
+    sort?: Partial<TMDESortOptions>;
+    search?: Partial<TMDESearchOptions>;
+    filter?: Partial<TMDEFilterOptions>;
+    pagination?: Partial<TMDEPaginationOptions>;
 };
 
 /**
@@ -239,23 +255,23 @@ type TDefaultParams = {
     /**
      * The default page number.
      */
-    page?: number;
+    page: number;
     /**
      * The default page size.
      */
-    pageSize?: number;
+    pageSize: number;
     /**
      * The default sorts.
      */
-    sorts?: TSortCondition[];
+    sorts: TSortCondition[];
     /**
      * The default search.
      */
-    search?: TSearchCondition;
+    search: TSearchCondition;
     /**
      * The default filters.
      */
-    filters?: TFilterCondition[];
+    filters: TFilterCondition[];
 };
 /**
  * Pagination configuration passed to DataTable context.
@@ -271,9 +287,13 @@ type TPaginationProps = {
     recordsPerPageOptions: number[];
 };
 /**
- * Context value type for DteProvider.
+ * Stable configuration context — rarely changes after mount.
  */
-type TDteContextProps<T = Record<string, unknown>> = {
+type TMDEConfigContextProps<T = Record<string, unknown>> = {
+    /**
+     * Adapter for query params state management (nuqs, TanStack Router, etc.).
+     */
+    queryParamsAdapter: TQueryParamsAdapter;
     /**
      * The keys of the URL parameters.
      * Useful for multiple data tables on the same page.
@@ -283,21 +303,28 @@ type TDteContextProps<T = Record<string, unknown>> = {
      * The default parameters of the data table.
      */
     defaultParams?: TDefaultParams;
-    /**
-     * The key of the column store.
-     * This is used to store the columns of the data table in localStorage for draggable and toggleable columns.
-     * Event if you don't want to use the draggable and toggleable columns, you should set this key.
-     */
-    storeColumnsKey: string;
     /**
      * The columns of the data table.
      * This is use original column properties from mantine-datatable with "extend" property.
      */
-    columns: TDteColumnProps<T>[];
+    columns: TMDEColumnProps<T>[];
     /**
      * The result of the useDataTableColumns hook from mantine-datatable.
      */
-    originalUseDataTableColumnsResult: ReturnType<typeof useDataTableColumns<T>>;
+    useDataTableColumnsResult: ReturnType<typeof useDataTableColumns<T>> & {
+        key: string;
+    };
+    /**
+     * Internationalization strings for all DataTable components.
+     * In context: merged result (always present).
+     * In provider props: optional input, merged with defaults.
+     */
+    i18n: TMDEI18n;
+};
+/**
+ * Mutable pagination context — changes on every data fetch.
+ */
+type TMDEPaginationContextProps = {
     /**
      * The pagination props.
      */
@@ -310,19 +337,14 @@ type TDteContextProps<T = Record<string, unknown>> = {
      * The function to set the pagination records per page options.
      */
     setRecordsPerPageOptions?: (recordsPerPageOptions: number[]) => void;
-    /**
-     * Internationalization strings for all DataTable components.
-     * In context: merged result (always present).
-     * In provider props: optional input, merged with defaults.
-     */
-    i18n: TDteI18n;
 };
 /**
- * Props for DteProvider. Extends context props but i18n is optional input.
+ * Props for MDEProvider. Extends context props but i18n is optional input.
  */
-type TDteProviderProps<T = Record<string, unknown>> = Omit<TDteContextProps<T>, "i18n"> & {
+type TMDEProviderProps<T = Record<string, unknown>> = Omit<TMDEConfigContextProps<T> & TMDEPaginationContextProps, "i18n" | "paginationProps"> & {
     children: react.ReactNode;
-    i18n?: TDteI18nInput;
+    paginationProps?: Partial<Pick<TPaginationProps, "recordsPerPageOptions">>;
+    i18n?: TMDEI18nInput;
 };
 
-export type { TDteProviderProps as T, TDteContextProps as a, TDteColumnProps as b, TDteI18nInput as c };
+export type { TQueryParamsAdapter as T, TPaginationProps as a, TMDEColumnProps as b, TUrlKeys as c, TDefaultParams as d, TMDEI18nInput as e, TSortCondition as f, TSearchCondition as g, TFilterCondition as h, TMDEProviderProps as i };

package/dist/index.d.ts

@@ -1,32 +1,138 @@
+import { T as TQueryParamsAdapter, a as TPaginationProps, b as TMDEColumnProps, c as TUrlKeys, d as TDefaultParams, e as TMDEI18nInput, f as TSortCondition, g as TSearchCondition, h as TFilterCondition, i as TMDEProviderProps } from './data-table-provider.type-DPvItGHz.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DataTableProps, DataTablePaginationProps, DataTableSortProps } from 'mantine-datatable';
-import * as nuqs from 'nuqs';
-import { T as TDteProviderProps, a as TDteContextProps } from './data-table-provider.type-dlzY73EE.js';
-export { b as TDteColumnProps, c as TDteI18nInput } from './data-table-provider.type-dlzY73EE.js';
+import * as mantine_datatable from 'mantine-datatable';
+import { DataTableProps, DataTablePaginationProps, DataTableSortProps, useDataTableColumns } from 'mantine-datatable';
 import 'react';
 import 'zod';
 
-declare function DteColumnsToggle(): react_jsx_runtime.JSX.Element;
+/**
+ * Nuqs-based adapter for query params.
+ * Syncs state with URL search params via nuqs.
+ */
+declare function createNuqsQueryParamsAdapter(): TQueryParamsAdapter;
 
-type TDteExtendedProps<T = Record<string, unknown>> = Omit<DataTableProps<T>, "storeColumnsKey" | "groups" | "columns" | keyof DataTablePaginationProps | keyof DataTableSortProps>;
-declare function DteExtended<T = Record<string, unknown>>(props: TDteExtendedProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * TanStack Router-based adapter for query params.
+ * Syncs state with URL search params via useSearch and useNavigate.
+ * Requires @tanstack/react-router to be installed.
+ */
+declare function createTanStackRouterQueryParamsAdapter(): TQueryParamsAdapter;
 
-declare function DteFilter(): react_jsx_runtime.JSX.Element;
+declare function MDEColumnsToggle(): react_jsx_runtime.JSX.Element;
 
-type TDtePaginationProps = {
-    recordsPerPageOptions?: number[];
-};
-declare function DtePagination({ recordsPerPageOptions, }: TDtePaginationProps): false | react_jsx_runtime.JSX.Element;
+type TMantineDatatableExtendedProps<T = Record<string, unknown>> = Omit<DataTableProps<T>, "storeColumnsKey" | "groups" | "columns" | keyof DataTablePaginationProps | keyof DataTableSortProps> & Partial<Pick<TPaginationProps, "totalRecords">>;
+declare function MantineDatatableExtended<T = Record<string, unknown>>(props: TMantineDatatableExtendedProps<T>): react_jsx_runtime.JSX.Element;
+
+declare function MDEFilter(): react_jsx_runtime.JSX.Element;
+
+declare function MDEPagination(): false | react_jsx_runtime.JSX.Element;
 
-declare function DteSearch(): react_jsx_runtime.JSX.Element;
+declare function MDESearch(): react_jsx_runtime.JSX.Element;
 
-declare function DteSortList(): react_jsx_runtime.JSX.Element;
+declare function MDESortList(): react_jsx_runtime.JSX.Element;
+
+type TUseMDEInputs<T = Record<string, unknown>> = {
+    /**
+     * The columns to display in the data table.
+     */
+    columns: TMDEColumnProps<T>[];
+    /**
+     * The query params adapter to use for the data table.
+     */
+    queryParamsAdapter: TQueryParamsAdapter;
+    /**
+     * The props to pass to the useDataTableColumns hook.
+     */
+    useDataTableColumnsProps?: Parameters<typeof useDataTableColumns<T>>[0];
+    /**
+     * The url keys to use for the data table.
+     */
+    urlKeys?: Partial<TUrlKeys>;
+    /**
+     * The default params to use for the data table.
+     */
+    defaultParams?: Partial<TDefaultParams>;
+    /**
+     * The pagination props to use for the data table.
+     */
+    paginationProps?: Partial<Pick<TPaginationProps, "recordsPerPageOptions">>;
+    /**
+     * The i18n to use for the data table.
+     */
+    i18n?: Partial<TMDEI18nInput>;
+};
+declare function useMDE<T = Record<string, unknown>>({ useDataTableColumnsProps, columns, queryParamsAdapter, urlKeys, defaultParams, paginationProps, i18n, }: TUseMDEInputs<T>): {
+    columns: TMDEColumnProps<T>[];
+    urlKeys: {
+        page: string;
+        pageSize: string;
+        sorts: string;
+        search: string;
+        filters: string;
+    };
+    defaultParams: {
+        page: number;
+        pageSize: number;
+        sorts: TSortCondition[];
+        search: TSearchCondition;
+        filters: TFilterCondition[];
+    };
+    i18n: any;
+    queryParamsAdapter: TQueryParamsAdapter;
+    useDataTableColumnsResult: {
+        key: string;
+        effectiveColumns: mantine_datatable.DataTableColumn<T>[];
+        setColumnsOrder: (order: string[] | ((prev: string[]) => string[])) => void;
+        columnsOrder: string[];
+        resetColumnsOrder: () => void;
+        columnsToggle: mantine_datatable.DataTableColumnToggle[];
+        setColumnsToggle: (toggle: mantine_datatable.DataTableColumnToggle[] | ((prev: mantine_datatable.DataTableColumnToggle[]) => mantine_datatable.DataTableColumnToggle[])) => void;
+        resetColumnsToggle: () => void;
+        columnsWidth: {
+            [x: string]: string | number;
+        }[];
+        setColumnsWidth: (updates: {
+            accessor: string;
+            width: string | number;
+        }[]) => void;
+        setColumnWidth: (accessor: string, width: string | number) => void;
+        setMultipleColumnWidths: (updates: {
+            accessor: string;
+            width: string | number;
+        }[]) => void;
+        resetColumnsWidth: () => void;
+        hasResizableColumns: boolean;
+        allResizableWidthsInitial: boolean;
+        measureAndSetColumnWidths: () => void;
+    };
+    paginationProps: {
+        recordsPerPageOptions: number[];
+    };
+};
 
-declare function useDteQueryParams(): {
+/**
+ *
+ * @returns Use this hook to get/set page number.
+ */
+declare function useMDEPage(): {
     page: number;
-    setPage: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    setPage: (value: number) => void;
+    resetPage: () => void;
+};
+/**
+ *
+ * @returns Use this hook to get/set page size.
+ */
+declare function useMDEPageSize(): {
     pageSize: number;
-    setPageSize: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    setPageSize: (value: number) => void;
+    resetPageSize: () => void;
+};
+/**
+ *
+ * @returns Use this hook to get/set sorts.
+ */
+declare function useMDESorts(): {
     sorts: {
         accessor: string;
         direction: "asc" | "desc";
@@ -34,13 +140,14 @@ declare function useDteQueryParams(): {
     setSorts: (value: {
         accessor: string;
         direction: "asc" | "desc";
-    }[] | ((old: {
-        accessor: string;
-        direction: "asc" | "desc";
-    }[]) => {
-        accessor: string;
-        direction: "asc" | "desc";
-    }[] | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    }[]) => void;
+    resetSorts: () => void;
+};
+/**
+ *
+ * @returns Use this hook to get/set search.
+ */
+declare function useMDESearch(): {
     search: {
         accessors: string[];
         value: string;
@@ -48,31 +155,61 @@ declare function useDteQueryParams(): {
     setSearch: (value: {
         accessors: string[];
         value: string;
-    } | ((old: {
-        accessors: string[];
-        value: string;
-    }) => {
-        accessors: string[];
-        value: string;
-    } | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    }) => void;
+    resetSearch: () => void;
+};
+/**
+ *
+ * @returns Use this hook to get/set filters.
+ */
+declare function useMDEFilters(): {
     filters: {
-        variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
         accessor: string;
         value: string | string[];
     }[];
     setFilters: (value: {
-        variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
         accessor: string;
         value: string | string[];
-    }[] | ((old: {
-        variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
+    }[]) => void;
+    resetFilters: () => void;
+};
+/**
+ *
+ * @returns Use this hook to get/set all query parameters.
+ */
+declare function useMDEQueryParams(): {
+    page: number;
+    setPage: (value: number) => void;
+    pageSize: number;
+    setPageSize: (value: number) => void;
+    sorts: {
+        accessor: string;
+        direction: "asc" | "desc";
+    }[];
+    setSorts: (value: {
+        accessor: string;
+        direction: "asc" | "desc";
+    }[]) => void;
+    search: {
+        accessors: string[];
+        value: string;
+    };
+    setSearch: (value: {
+        accessors: string[];
+        value: string;
+    }) => void;
+    filters: {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
         accessor: string;
         value: string | string[];
-    }[]) => {
-        variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
+    }[];
+    setFilters: (value: {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
         accessor: string;
         value: string | string[];
-    }[] | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    }[]) => void;
     resetPage: () => void;
     resetPageSize: () => void;
     resetSorts: () => void;
@@ -81,7 +218,12 @@ declare function useDteQueryParams(): {
     resetAll: () => void;
 };
 
-declare function useDteContext<T = Record<string, unknown>>(): TDteContextProps<T>;
-declare function DteProvider<T = Record<string, unknown>>({ children, urlKeys, defaultParams, storeColumnsKey, columns, originalUseDataTableColumnsResult, i18n: i18nInput, }: TDteProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function MDEProvider<T = Record<string, unknown>>({ children, queryParamsAdapter, urlKeys, defaultParams, columns, useDataTableColumnsResult, i18n: i18nInput, paginationProps, }: TMDEProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+type TCreateMDEColumnsHelperProps<T = Record<string, unknown>> = () => TMDEColumnProps<T>[];
+/**
+ * A helper function to create columns for the data table.
+ */
+declare function createMDEColumnsHelper<T = Record<string, unknown>>(getColumns: TCreateMDEColumnsHelperProps<T>): TMDEColumnProps<T>[];
 
-export { DteColumnsToggle, DteExtended, DteFilter, DtePagination, DteProvider, DteSearch, DteSortList, TDteProviderProps, useDteContext, useDteQueryParams };
+export { MDEColumnsToggle, MDEFilter, MDEPagination, MDEProvider, MDESearch, MDESortList, MantineDatatableExtended, createMDEColumnsHelper, createNuqsQueryParamsAdapter, createTanStackRouterQueryParamsAdapter, useMDE, useMDEFilters, useMDEPage, useMDEPageSize, useMDEQueryParams, useMDESearch, useMDESorts };

package/dist/index.mjs

@@ -1,2 +1,3 @@
+"use no memo";
 "use client";
-import {Popover,Button,TextInput,Divider,ScrollArea,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,CloseButton,Badge,Indicator,NumberInput,RangeSlider,ActionIcon,Select}from'@mantine/core';import {IconAdjustmentsHorizontal,IconSearch,IconX,IconArrowsSort,IconPlus,IconRefresh,IconFilter,IconTrash,IconGripHorizontal}from'@tabler/icons-react';import {createContext,useContext,useState,useMemo,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';import {DataTable}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import we,{z}from'zod';import {DatePicker}from'@mantine/dates';import L from'dayjs';import {DragDropProvider}from'@dnd-kit/react';import {isSortable,useSortable}from'@dnd-kit/react/sortable';var B={view:{columnsToggle:"Columns Toggle",columnsToggleSearchPlaceholder:"Search columns\u2026"},sort:{sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"},search:{search:"Search",searchAccessorsSearchPlaceholder:"Search columns\u2026"},filter:{resetFilter:"Reset Filters"},pagination:{rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]}};var Te=createContext(void 0);function b(){let o=useContext(Te);if(!o)throw new Error("useDteContext must be used within a DteProvider");return o}function $e({children:o,urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,i18n:r}){if(!i)throw new Error("storeColumnsKey property is required");if(!a)throw new Error("columns property is required");let[m,p]=useState(0),[u,t]=useState([10,20,30,40,50]),c=useMemo(()=>({totalRecords:m,recordsPerPageOptions:u}),[m,u]),h=useMemo(()=>({view:{...B.view,...r?.view},sort:{...B.sort,...r?.sort},search:{...B.search,...r?.search},filter:{...B.filter,...r?.filter},pagination:{...B.pagination,...r?.pagination}}),[r]),g=useMemo(()=>({urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,paginationProps:c,setTotalRecords:p,setRecordsPerPageOptions:t,i18n:h}),[e,l,i,a,s,c,h]);return jsx(Te.Provider,{value:{...g},children:o})}function st(){let{originalUseDataTableColumnsResult:o,i18n:e}=b(),{effectiveColumns:l,columnsToggle:i,setColumnsToggle:a}=o,[s,r]=useState(""),m=useMemo(()=>i.filter(t=>t.toggleable),[i]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(l.find(g=>g.accessor===c.accessor)?.title?.toString()??"").toLowerCase().includes(t))},[m,l,s]),u=t=>{a(i.map(c=>c.accessor===t.accessor?{...c,toggled:!c.toggled}:c));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconAdjustmentsHorizontal,{size:16}),variant:"default",children:e.view.columnsToggle})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.view.columnsToggleSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:t.toggled,classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:l.find(c=>c.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>u(t),size:"xs",variant:"outline"},t.accessor))})})]})]})}function it(o){let{storeColumnsKey:e,originalUseDataTableColumnsResult:l}=b(),{effectiveColumns:i}=l,a={...o,columns:i,storeColumnsKey:e};return jsx(DataTable,{...a})}var N={ASC:"asc",DESC:"desc"},F={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var ve=z.object({accessor:z.string(),direction:z.enum(N)}),be=z.object({accessors:z.array(z.string()),value:z.string()}),Pe=z.object({variant:z.enum(F),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function D(){let o={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},e={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:l,defaultParams:i}=b();l&&(o=l),i&&(e={...e,...i});let[a,s]=useQueryState(o.page,parseAsInteger.withDefault(e.page)),[r,m]=useQueryState(o.pageSize,parseAsInteger.withDefault(e.pageSize)),[p,u]=useQueryState(o.sorts,parseAsJson(we.array(ve)).withDefault(e.sorts)),[t,c]=useQueryState(o.search,parseAsJson(be).withDefault(e.search)),[h,g]=useQueryState(o.filters,parseAsJson(we.array(Pe)).withDefault(e.filters)),f=()=>{s(e.page);},n=()=>{m(e.pageSize);},d=()=>{u(e.sorts);},P=()=>{c(e.search);},T=()=>{g(e.filters);};return {page:a,setPage:s,pageSize:r,setPageSize:m,sorts:p,setSorts:u,search:t,setSearch:c,filters:h,setFilters:g,resetPage:f,resetPageSize:n,resetSorts:d,resetSearch:P,resetFilters:T,resetAll:()=>{f(),n(),d(),P(),T();}}}function Fe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(c=>c.accessor===e),r=s?.value?1:0,[m,p]=useState(s?L(Number.parseInt(s.value,10)).toISOString():null),u=c=>{if(p(c),c){let h=L(c).valueOf().toString();a(s?i.map(g=>g.accessor===e?{...g,value:h}:g):[...i,{variant:l,accessor:e,value:h}]);}},t=()=>{p(null),a(i.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{defaultDate:m?new Date(m):void 0,onChange:u,value:m})})]})}function Re({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(h=>h.accessor===e),r=s?.value.length??0,[m,p]=useState(s?.value[0]&&s?.value[1]?[L(Number.parseInt(s.value[0],10)).toISOString(),L(Number.parseInt(s.value[1],10)).toISOString()]:[null,null]),u=([h,g])=>{if(p([h,g]),h&&g){let[f,n]=[L(h).valueOf().toString(),L(g).valueOf().toString()];a(s?i.map(d=>d.accessor===e?{...d,value:[f,n]}:d):[...i,{variant:l,accessor:e,value:[f,n]}]);}},t=()=>{p([null,null]),a(i.filter(h=>h.accessor!==e));},c=m[1]&&m[0];return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,defaultDate:c?new Date(c):void 0,onChange:u,type:"range",value:m})})]})}function Ee({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{let d=t?.value??[],P=d.includes(n)?d.filter(T=>T!==n):[...d,n];if(P.length===0)u(p.filter(T=>T.accessor!==e));else {let T=p.some(S=>S.accessor===e);u(T?p.map(S=>S.accessor===e?{...S,value:P}:S):[...p,{variant:l,accessor:e,value:P}]);}},g=n=>p.some(d=>d.accessor===e&&d.value.includes(n)),f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${n.value}`))})})]})]})}function Ae({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?i.map(c=>c.accessor===e?{...c,value:t.toString()}:c):[...i,{variant:l,accessor:e,value:t.toString()}]);},p=t=>{let c=t;typeof t=="string"&&(c=Number.parseInt(t,10)),m(c);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(NumberInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t),p:"4",value:s?.value?Number.parseInt(s.value,10):void 0,variant:"unstyled"})})]})}function Oe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{min:i,max:a,step:s=1,minRange:r=1,suffix:m}=o.extend?.filterOptions,{filters:p,setFilters:u}=D(),t=p.find(T=>T.accessor===e),c=t?.value.length??0,h=T=>{let[S,k]=[T[0].toString(),T[1].toString()];u(t?p.map(X=>X.accessor===e?{...X,value:[S,k]}:X):[...p,{variant:l,accessor:e,value:[S,k]}]);},g=t?.value[0]&&t?.value[1]?[Number.parseInt(t.value[0],10),Number.parseInt(t.value[1],10)]:[i,a],f=([T,S])=>{h([T,S]);},n=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||i:T,k=Math.min(Math.max(S,i),g[1]);h([k,g[1]]);},d=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||a:T,k=Math.max(Math.min(S,a),g[0]);h([g[0],k]);},P=()=>{u(p.filter(T=>T.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:P,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"xs",children:jsxs(Stack,{gap:"md",children:[jsxs(Group,{grow:true,children:[jsx(NumberInput,{max:g[1],min:i,onChange:n,step:s,suffix:m,value:g[0]}),jsx(NumberInput,{max:a,min:g[0],onChange:d,step:s,suffix:m,value:g[1]})]}),jsx(RangeSlider,{label:null,max:a,min:i,minRange:r,onChange:f,step:s,value:g})]})})]})}function Ve({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{u(t?p.map(d=>d.accessor===e?{...d,value:n}:d):[...p,{variant:l,accessor:e,value:n}]);},g=n=>t?.value===n,f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),radius:"xl",size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}}},`${e}-${n.value}`))})})]})]})}function Ne({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?t===""?i.filter(c=>c.accessor!==e):i.map(c=>c.accessor===e?{...c,value:t}:c):[...i,{variant:l,accessor:e,value:t}]);},p=t=>{m(t);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(TextInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t.target.value),p:"4",value:s?.value??"",variant:"unstyled"})})]})}function jt(){let{filters:o,resetFilters:e}=D(),{columns:l,i18n:i}=b(),a=()=>{e();},s=l.filter(r=>r.extend?.filterable);return jsxs(Group,{gap:"xs",children:[s.map(r=>{switch(r.extend?.filterVariant){case F.TEXT:return jsx(Ne,{column:r},r.accessor);case F.NUMBER:return jsx(Ae,{column:r},r.accessor);case F.SINGLE_SELECT:return jsx(Ve,{column:r},r.accessor);case F.MULTI_SELECT:return jsx(Ee,{column:r},r.accessor);case F.DATE:return jsx(Fe,{column:r},r.accessor);case F.DATE_RANGE:return jsx(Re,{column:r},r.accessor);case F.NUMBER_RANGE:return jsx(Oe,{column:r},r.accessor);default:return null}}),o.length>0&&jsx(Button,{color:"red",leftSection:jsx(IconX,{size:16}),onClick:a,variant:"outline",children:i.filter.resetFilter})]})}var no=[10,20,30,40,50];function so({recordsPerPageOptions:o=no}){let{page:e,pageSize:l,setPage:i,setPageSize:a}=D(),{paginationProps:s,i18n:r}=b(),{totalRecords:m}=s||{},[p,u]=useState(0),[{startRecord:t,endRecord:c},h]=useState({startRecord:0,endRecord:0});return useEffect(()=>{u(Math.ceil((m||0)/(l||(o[0]??10))));},[m,l,o]),useEffect(()=>{h({startRecord:(e-1)*l+1,endRecord:Math.min(e*l,m||0)});},[e,l,m]),p>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[r.pagination.startEndRecordOfTotalRecords[0]," ",t," ",r.pagination.startEndRecordOfTotalRecords[1]," ",c," ",r.pagination.startEndRecordOfTotalRecords[2]," ",m]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:r.pagination.rowsPerPage}),jsx(NativeSelect,{data:o.map(g=>({label:g.toString(),value:g.toString()})),onChange:g=>a(Number(g.target.value)),size:"xs",value:l,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[r.pagination.pageOfTotalPages[0]," ",e," ",r.pagination.pageOfTotalPages[1]," ",p]}),jsx(Pagination,{onChange:g=>i(g),size:"sm",total:p,value:e,withControls:true,withEdges:true})]})]})}function To(){let{columns:o,i18n:e}=b(),{search:l,setSearch:i}=D(),a=l.accessors.length,[s,r]=useState(""),m=useMemo(()=>o.filter(t=>t.extend?.searchable),[o]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(c.title?.toString()??"").toLowerCase().includes(t))},[m,s]),u=t=>{l.accessors.includes(t)?i({...l,accessors:l.accessors.filter(c=>c!==t)}):i({...l,accessors:[...l.accessors,t]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:a<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:a}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.search.searchAccessorsSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:l.accessors.includes(t.accessor.toString()),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:t.title?.toString()??"",labelPosition:"left",onChange:()=>u(t.accessor.toString()),size:"xs",variant:"outline"},t.accessor.toString()))})})]})]})}function Do(){let{search:o,setSearch:e}=D(),{i18n:l}=b(),i=a=>{e({...o,value:a});};return jsxs(Group,{gap:"xs",children:[jsx(To,{}),jsx(TextInput,{onChange:a=>i(a.target.value),placeholder:l.search.search,rightSection:o.value.length>0&&jsx(CloseButton,{onClick:()=>i(""),size:"sm",variant:"transparent"}),value:o.value,w:"200px"})]})}function Eo({sort:o,index:e,sortableColumns:l,onAccessorChange:i,onDirectionChange:a,onRemoveSort:s}){let{i18n:r}=b(),{ref:m,handleRef:p}=useSortable({id:o.accessor,index:e});return jsxs(Group,{align:"center",gap:"xs",ref:m,wrap:"nowrap",children:[jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:l.map(u=>({label:u.title?.toString()??"",value:u.accessor})),onChange:u=>i(o.accessor,u),searchable:true,size:"xs",value:o.accessor}),jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:Object.values(N).map(u=>({label:r.sort[u]??"",value:u})),onChange:u=>a(o.accessor,u),size:"xs",value:o.direction}),jsx(ActionIcon,{"aria-label":"Remove sort",onClick:()=>s(o.accessor),size:"md",variant:"default",children:jsx(IconTrash,{size:16})}),jsx(ActionIcon,{"aria-label":"Drag to reorder",ref:p,size:"md",style:{cursor:"grab",flexShrink:0},variant:"default",children:jsx(IconGripHorizontal,{size:16})})]})}function Io(){let{sorts:o,setSorts:e,resetSorts:l}=D(),{columns:i,i18n:a}=b(),s=i.filter(f=>f.extend?.sortable),r=s.filter(f=>!o.some(n=>n.accessor===f.accessor)),m=o.length,p=()=>{if(r.length>0&&r[0]){let f={accessor:r[0].accessor,direction:N.ASC};e([...o,f]);}},u=()=>{l();},t=f=>{e(o.filter(n=>n.accessor!==f));},c=(f,n)=>{if(n===null)return;let d=o.filter(P=>P.accessor!==f&&P.accessor!==n);e([...d,{accessor:n,direction:o.find(P=>P.accessor===f)?.direction||N.ASC}]);},h=(f,n)=>{n!==null&&e(o.map(d=>d.accessor===f?{...d,direction:n}:d));},g=f=>{if(f.canceled)return;let{source:n}=f.operation;if(n&&isSortable(n)){let{initialIndex:d,index:P}=n;d!==P&&e(T=>{let S=[...T],[k]=S.splice(d,1);return k&&S.splice(P,0,k),S});}};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconArrowsSort,{size:16}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:m}),variant:"default",children:a.sort.sort})}),jsxs(Popover.Dropdown,{p:"sm",children:[jsx(DragDropProvider,{onDragEnd:g,children:jsx(Stack,{gap:"xs",children:o.map((f,n)=>jsx(Eo,{index:n,onAccessorChange:c,onDirectionChange:h,onRemoveSort:t,sort:f,sortableColumns:s},f.accessor))})}),jsx(Space,{h:"sm"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:r.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:p,size:"xs",variant:"filled",children:a.sort.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:u,size:"xs",variant:"default",children:a.sort.resetSort})]})]})]})}export{st as DteColumnsToggle,it as DteExtended,jt as DteFilter,so as DtePagination,$e as DteProvider,Do as DteSearch,Io as DteSortList,b as useDteContext,D as useDteQueryParams};
+import {e,d,c,i,h,j as j$1,f,g,b,a}from'./chunk-EDD26HQ2.mjs';import {useQueryState,parseAsJson,parseAsInteger}from'nuqs';import {z}from'zod';import {useSearch,useNavigate}from'@tanstack/react-router';import {createContext,useMemo,useCallback,useState,useEffect,useContext}from'react';import {Popover,Button,TextInput,Divider,ScrollArea,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,CloseButton,Badge,Indicator,NumberInput,RangeSlider,ActionIcon,Select}from'@mantine/core';import {IconAdjustmentsHorizontal,IconSearch,IconX,IconArrowsSort,IconPlus,IconRefresh,IconFilter,IconTrash,IconGripHorizontal}from'@tabler/icons-react';import {jsx,jsxs}from'react/jsx-runtime';import {DataTable,useDataTableColumns}from'mantine-datatable';import {DatePicker}from'@mantine/dates';import re from'dayjs';import {DragDropProvider}from'@dnd-kit/react';import {isSortable,useSortable}from'@dnd-kit/react/sortable';function Ne(){return {usePage:(e,t)=>useQueryState(e,parseAsInteger.withDefault(t)),usePageSize:(e,t)=>useQueryState(e,parseAsInteger.withDefault(t)),useSorts:(e,t)=>useQueryState(e,parseAsJson(z.array(c)).withDefault(t)),useSearch:(e,t)=>useQueryState(e,parseAsJson(d).withDefault(t)),useFilters:(e$1,t)=>useQueryState(e$1,parseAsJson(z.array(e)).withDefault(t))}}function Ve(e,t){if(e==null)return t;let a=Number(e);return Number.isNaN(a)?t:a}function ce(e,t,a){if(e==null)return a;let s=typeof e=="string"?(()=>{try{return JSON.parse(e)}catch{return e}})():e,r=t.safeParse(s);return r.success?r.data:a}function Ge(){return {usePage:(e,t)=>{let a=useSearch({strict:false}),s=useNavigate(),r=useMemo(()=>Ve(a[e],t),[a[e],t,e]),n=useCallback(o=>{s({to:".",search:l=>({...l,[e]:o}),replace:true});},[s,e]);return [r,n]},usePageSize:(e,t)=>{let a=useSearch({strict:false}),s=useNavigate(),r=useMemo(()=>Ve(a[e],t),[a[e],t,e]),n=useCallback(o=>{s({to:".",search:l=>({...l,[e]:o}),replace:true});},[s,e]);return [r,n]},useSorts:(e,t)=>{let a=useSearch({strict:false}),s=useNavigate(),r=useMemo(()=>ce(a[e],z.array(c),t),[a[e],t,e]),n=useCallback(o=>{s({to:".",search:l=>({...l,[e]:o}),replace:true});},[s,e]);return [r,n]},useSearch:(e,t)=>{let a=useSearch({strict:false}),s=useNavigate(),r=useMemo(()=>ce(a[e],d,t),[a[e],t,e]),n=useCallback(o=>{s({to:".",search:l=>({...l,[e]:o}),replace:true});},[s,e]);return [r,n]},useFilters:(e$1,t)=>{let a=useSearch({strict:false}),s=useNavigate(),r=useMemo(()=>ce(a[e$1],z.array(e),t),[a[e$1],t,e$1]),n=useCallback(o=>{s({to:".",search:l=>({...l,[e$1]:o}),replace:true});},[s,e$1]);return [r,n]}}}var He=createContext(void 0);function T(){let e=useContext(He);if(!e)throw new Error("useMDEConfigContext must be used within a MDEProvider");return e}var Ke=createContext(void 0);function Z(){let e=useContext(Ke);if(!e)throw new Error("useMDEPaginationContext must be used within a MDEProvider");return e}function dt({children:e,queryParamsAdapter:t,urlKeys:a,defaultParams:s,columns:r,useDataTableColumnsResult:n,i18n:o,paginationProps:l}){if(!r)throw new Error("columns property is required");if(!t)throw new Error("queryParamsAdapter property is required");let[p,m]=useState(i),[i$1,u]=useState(l?.recordsPerPageOptions??h),P=useMemo(()=>({view:{...j$1.view,...o?.view},sort:{...j$1.sort,...o?.sort},search:{...j$1.search,...o?.search},filter:{...j$1.filter,...o?.filter},pagination:{...j$1.pagination,...o?.pagination}}),[JSON.stringify(o)]),f=useMemo(()=>({queryParamsAdapter:t,urlKeys:a,defaultParams:s,columns:r,useDataTableColumnsResult:n,i18n:P}),[t,JSON.stringify(a),JSON.stringify(s),r,n,P]),g=useCallback(E=>m(E),[]),c=useCallback(E=>u(E),[]),d=useMemo(()=>({paginationProps:{totalRecords:p,recordsPerPageOptions:i$1},setTotalRecords:g,setRecordsPerPageOptions:c}),[p,i$1,g,c]);return jsx(He.Provider,{value:f,children:jsx(Ke.Provider,{value:d,children:e})})}function Ct(){let{useDataTableColumnsResult:e,i18n:t}=T(),{effectiveColumns:a,columnsToggle:s,setColumnsToggle:r}=e,[n,o]=useState(""),l=useMemo(()=>s.filter(i=>i.toggleable),[s]),p=useMemo(()=>{if(!n.trim())return l;let i=n.toLowerCase().trim();return l.filter(u=>(a.find(f=>f.accessor===u.accessor)?.title?.toString()??"").toLowerCase().includes(i))},[l,a,n]),m=i=>{r(s.map(u=>u.accessor===i.accessor?{...u,toggled:!u.toggled}:u));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconAdjustmentsHorizontal,{size:16}),variant:"default",children:t.view.columnsToggle})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:i=>o(i.target.value),p:"4",placeholder:t.view.columnsToggleSearchPlaceholder,styles:{input:{border:"none"}},value:n}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(i=>jsx(Checkbox,{checked:i.toggled,classNames:{root:"mantine-mde-checkbox-root",body:"mantine-mde-checkbox-body",labelWrapper:"mantine-mde-checkbox-label-wrapper",label:"mantine-mde-checkbox-label",input:"mantine-mde-checkbox-input",icon:"mantine-mde-checkbox-icon"},label:a.find(u=>u.accessor===i.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>m(i),size:"xs",variant:"outline"},i.accessor))})})]})]})}function wt(e){let{useDataTableColumnsResult:t}=T(),{setTotalRecords:a}=Z(),{effectiveColumns:s}=t,r={...e,columns:s,storeColumnsKey:t.key};return useEffect(()=>{a?.(e.totalRecords??i);},[e.totalRecords,a]),jsx(DataTable,{...r})}function j(){let{queryParamsAdapter:e,urlKeys:t,defaultParams:a}=T(),s=t?.page??f.page,r=a?.page??g.page,[n,o]=e.usePage(s,r),l=useCallback(()=>o(r),[o,r]);return {page:n,setPage:o,resetPage:l}}function ee(){let{queryParamsAdapter:e,urlKeys:t,defaultParams:a}=T(),s=t?.pageSize??f.pageSize,r=a?.pageSize??g.pageSize,[n,o]=e.usePageSize(s,r),l=useCallback(()=>o(r),[o,r]);return {pageSize:n,setPageSize:o,resetPageSize:l}}function te(){let{queryParamsAdapter:e,urlKeys:t,defaultParams:a}=T(),s=t?.sorts??f.sorts,r=a?.sorts??g.sorts,[n,o]=e.useSorts(s,r),l=useCallback(()=>o(r),[o,r]);return {sorts:n,setSorts:o,resetSorts:l}}function q(){let{queryParamsAdapter:e,urlKeys:t,defaultParams:a}=T(),s=t?.search??f.search,r=a?.search??g.search,[n,o]=e.useSearch(s,r),l=useCallback(()=>o(r),[o,r]);return {search:n,setSearch:o,resetSearch:l}}function D(){let{queryParamsAdapter:e,urlKeys:t,defaultParams:a}=T(),s=t?.filters??f.filters,r=a?.filters??g.filters,[n,o]=e.useFilters(s,r),l=useCallback(()=>o(r),[o,r]);return {filters:n,setFilters:o,resetFilters:l}}function Ft(){let{page:e,setPage:t,resetPage:a}=j(),{pageSize:s,setPageSize:r,resetPageSize:n}=ee(),{sorts:o,setSorts:l,resetSorts:p}=te(),{search:m,setSearch:i,resetSearch:u}=q(),{filters:P,setFilters:f,resetFilters:g}=D(),c=useCallback(()=>{a(),n(),p(),u(),g();},[a,n,p,u,g]);return {page:e,setPage:t,pageSize:s,setPageSize:r,sorts:o,setSorts:l,search:m,setSearch:i,filters:P,setFilters:f,resetPage:a,resetPageSize:n,resetSorts:p,resetSearch:u,resetFilters:g,resetAll:c}}function Ye({column:e}){let t=e.accessor,a=e.extend?.filterVariant,{filters:s,setFilters:r}=D(),n=s.find(u=>u.accessor===t),o=n?.value?1:0,[l,p]=useState(n?re(Number.parseInt(n.value,10)).toISOString():null),m=u=>{if(p(u),u){let P=re(u).valueOf().toString();r(n?s.map(f=>f.accessor===t?{...f,value:P}:f):[...s,{variant:a,accessor:t,value:P}]);}},i=()=>{p(null),r(s.filter(u=>u.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:o<=0,processing:true,children:jsxs(Button.Group,{children:[o>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{defaultDate:l?new Date(l):void 0,onChange:m,value:l})})]})}function je({column:e}){let t=e.accessor,a=e.extend?.filterVariant,{filters:s,setFilters:r}=D(),n=s.find(P=>P.accessor===t),o=n?.value.length??0,[l,p]=useState(n?.value[0]&&n?.value[1]?[re(Number.parseInt(n.value[0],10)).toISOString(),re(Number.parseInt(n.value[1],10)).toISOString()]:[null,null]),m=([P,f])=>{if(p([P,f]),P&&f){let[g,c]=[re(P).valueOf().toString(),re(f).valueOf().toString()];r(n?s.map(d=>d.accessor===t?{...d,value:[g,c]}:d):[...s,{variant:a,accessor:t,value:[g,c]}]);}},i=()=>{p([null,null]),r(s.filter(P=>P.accessor!==t));},u=l[1]&&l[0];return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:o<=0,processing:true,children:jsxs(Button.Group,{children:[o>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,defaultDate:u?new Date(u):void 0,onChange:m,type:"range",value:l})})]})}function et({column:e}){let t=e.accessor,a=e.extend?.filterVariant,r=(e.extend?.filterOptions).data,[n,o]=useState(""),l=useMemo(()=>{if(!n.trim())return r;let c=n.toLowerCase().trim();return r.filter(d=>d.label.toLowerCase().includes(c))},[r,n]),{filters:p,setFilters:m}=D(),i=p.find(c=>c.accessor===t),u=i?.value.length??0,P=c=>{let d=i?.value??[],E=d.includes(c)?d.filter(h=>h!==c):[...d,c];if(E.length===0)m(p.filter(h=>h.accessor!==t));else {let h=p.some(b=>b.accessor===t);m(h?p.map(b=>b.accessor===t?{...b,value:E}:b):[...p,{variant:a,accessor:t,value:E}]);}},f=c=>p.some(d=>d.accessor===t&&d.value.includes(c)),g=()=>{m(p.filter(c=>c.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:u<=0,processing:true,children:jsxs(Button.Group,{children:[u>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:c=>o(c.target.value),p:"4",styles:{input:{border:"none"}},value:n}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:l.map(c=>jsx(Checkbox,{checked:f(c.value),classNames:{root:"mantine-mde-checkbox-root",body:"mantine-mde-checkbox-body",labelWrapper:"mantine-mde-checkbox-label-wrapper",label:"mantine-mde-checkbox-label",input:"mantine-mde-checkbox-input",icon:"mantine-mde-checkbox-icon"},label:c.label,labelPosition:"left",onChange:()=>P(c.value),size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${t}-${c.value}`))})})]})]})}function rt({column:e}){let t=e.accessor,a=e.extend?.filterVariant,{filters:s,setFilters:r}=D(),n=s.find(i=>i.accessor===t),o=n?.value.length??0,l=i=>{r(n?s.map(u=>u.accessor===t?{...u,value:i.toString()}:u):[...s,{variant:a,accessor:t,value:i.toString()}]);},p=i=>{let u=i;typeof i=="string"&&(u=Number.parseInt(i,10)),l(u);},m=()=>{r(s.filter(i=>i.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:o<=0,processing:true,children:jsxs(Button.Group,{children:[o>0&&jsx(Button,{onClick:m,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(NumberInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:i=>p(i),p:"4",value:n?.value?Number.parseInt(n.value,10):void 0,variant:"unstyled"})})]})}function nt({column:e}){let t=e.accessor,a=e.extend?.filterVariant,{min:s,max:r,step:n=1,minRange:o=1,suffix:l}=e.extend?.filterOptions,{filters:p,setFilters:m}=D(),i=p.find(h=>h.accessor===t),u=i?.value.length??0,P=h=>{let[b,B]=[h[0].toString(),h[1].toString()];m(i?p.map(ae=>ae.accessor===t?{...ae,value:[b,B]}:ae):[...p,{variant:a,accessor:t,value:[b,B]}]);},f=i?.value[0]&&i?.value[1]?[Number.parseInt(i.value[0],10),Number.parseInt(i.value[1],10)]:[s,r],g=([h,b])=>{P([h,b]);},c=h=>{let b=typeof h=="string"?Number.parseInt(h,10)||s:h,B=Math.min(Math.max(b,s),f[1]);P([B,f[1]]);},d=h=>{let b=typeof h=="string"?Number.parseInt(h,10)||r:h,B=Math.max(Math.min(b,r),f[0]);P([f[0],B]);},E=()=>{m(p.filter(h=>h.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:u<=0,processing:true,children:jsxs(Button.Group,{children:[u>0&&jsx(Button,{onClick:E,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsx(Popover.Dropdown,{p:"xs",children:jsxs(Stack,{gap:"md",children:[jsxs(Group,{grow:true,children:[jsx(NumberInput,{max:f[1],min:s,onChange:c,step:n,suffix:l,value:f[0]}),jsx(NumberInput,{max:r,min:f[0],onChange:d,step:n,suffix:l,value:f[1]})]}),jsx(RangeSlider,{label:null,max:r,min:s,minRange:o,onChange:g,step:n,value:f})]})})]})}function st({column:e}){let t=e.accessor,a=e.extend?.filterVariant,r=(e.extend?.filterOptions).data,[n,o]=useState(""),l=useMemo(()=>{if(!n.trim())return r;let c=n.toLowerCase().trim();return r.filter(d=>d.label.toLowerCase().includes(c))},[r,n]),{filters:p,setFilters:m}=D(),i=p.find(c=>c.accessor===t),u=i?.value.length??0,P=c=>{m(i?p.map(d=>d.accessor===t?{...d,value:c}:d):[...p,{variant:a,accessor:t,value:c}]);},f=c=>i?.value===c,g=()=>{m(p.filter(c=>c.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:u<=0,processing:true,children:jsxs(Button.Group,{children:[u>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:c=>o(c.target.value),p:"4",styles:{input:{border:"none"}},value:n}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:l.map(c=>jsx(Checkbox,{checked:f(c.value),classNames:{root:"mantine-mde-checkbox-root",body:"mantine-mde-checkbox-body",labelWrapper:"mantine-mde-checkbox-label-wrapper",label:"mantine-mde-checkbox-label",input:"mantine-mde-checkbox-input",icon:"mantine-mde-checkbox-icon"},label:c.label,labelPosition:"left",onChange:()=>P(c.value),radius:"xl",size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}}},`${t}-${c.value}`))})})]})]})}function it({column:e}){let t=e.accessor,a=e.extend?.filterVariant,{filters:s,setFilters:r}=D(),n=s.find(i=>i.accessor===t),o=n?.value.length??0,l=i=>{r(n?i===""?s.filter(u=>u.accessor!==t):s.map(u=>u.accessor===t?{...u,value:i}:u):[...s,{variant:a,accessor:t,value:i}]);},p=i=>{l(i);},m=()=>{r(s.filter(i=>i.accessor!==t));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:o<=0,processing:true,children:jsxs(Button.Group,{children:[o>0&&jsx(Button,{onClick:m,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:e.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(TextInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:i=>p(i.target.value),p:"4",value:n?.value??"",variant:"unstyled"})})]})}function Sr(){let{filters:e,resetFilters:t}=D(),{columns:a,i18n:s}=T(),r=()=>{t();},n=a.filter(o=>o.extend?.filterable);return jsxs(Group,{gap:"xs",children:[n.map(o=>{switch(o.extend?.filterVariant){case b.TEXT:return jsx(it,{column:o},o.accessor);case b.NUMBER:return jsx(rt,{column:o},o.accessor);case b.SINGLE_SELECT:return jsx(st,{column:o},o.accessor);case b.MULTI_SELECT:return jsx(et,{column:o},o.accessor);case b.DATE:return jsx(Ye,{column:o},o.accessor);case b.DATE_RANGE:return jsx(je,{column:o},o.accessor);case b.NUMBER_RANGE:return jsx(nt,{column:o},o.accessor);default:return null}}),e.length>0&&jsx(Button,{color:"red",leftSection:jsx(IconX,{size:16}),onClick:r,variant:"outline",children:s.filter.resetFilter})]})}function Mr(){let{page:e,setPage:t}=j(),{pageSize:a,setPageSize:s}=ee(),{paginationProps:r}=Z(),{i18n:n}=T(),{totalRecords:o,recordsPerPageOptions:l}=r||{},p=useMemo(()=>Math.ceil((o||0)/((a||l?.[0])??10)),[o,a,l]),m=(e-1)*a+1,i=Math.min(e*a,o||0);return p>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[n.pagination.startEndRecordOfTotalRecords[0]," ",m," ",n.pagination.startEndRecordOfTotalRecords[1]," ",i," ",n.pagination.startEndRecordOfTotalRecords[2]," ",o]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:n.pagination.rowsPerPage}),jsx(NativeSelect,{data:l?.map(u=>({label:u.toString(),value:u.toString()}))||[],onChange:u=>s(Number(u.target.value)),size:"xs",value:a,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[n.pagination.pageOfTotalPages[0]," ",e," ",n.pagination.pageOfTotalPages[1]," ",p]}),jsx(Pagination,{onChange:u=>t(u),size:"sm",total:p,value:e,withControls:true,withEdges:true})]})]})}function Br(){let{columns:e,i18n:t}=T(),{search:a,setSearch:s}=q(),r=a.accessors.length,[n,o]=useState(""),l=useMemo(()=>e.filter(i=>i.extend?.searchable),[e]),p=useMemo(()=>{if(!n.trim())return l;let i=n.toLowerCase().trim();return l.filter(u=>(u.title?.toString()??"").toLowerCase().includes(i))},[l,n]),m=i=>{a.accessors.includes(i)?s({...a,accessors:a.accessors.filter(u=>u!==i)}):s({...a,accessors:[...a.accessors,i]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:r<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:r}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:i=>o(i.target.value),p:"4",placeholder:t.search.searchAccessorsSearchPlaceholder,styles:{input:{border:"none"}},value:n}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(i=>jsx(Checkbox,{checked:a.accessors.includes(i.accessor.toString()),classNames:{root:"mantine-mde-checkbox-root",body:"mantine-mde-checkbox-body",labelWrapper:"mantine-mde-checkbox-label-wrapper",label:"mantine-mde-checkbox-label",input:"mantine-mde-checkbox-input",icon:"mantine-mde-checkbox-icon"},label:i.title?.toString()??"",labelPosition:"left",onChange:()=>m(i.accessor.toString()),size:"xs",variant:"outline"},i.accessor.toString()))})})]})]})}function Vr(){let{search:e,setSearch:t}=q(),{i18n:a}=T(),s=r=>{t({...e,value:r});};return jsxs(Group,{gap:"xs",children:[jsx(Br,{}),jsx(TextInput,{onChange:r=>s(r.target.value),placeholder:a.search.search,rightSection:e.value.length>0&&jsx(CloseButton,{onClick:()=>s(""),size:"sm",variant:"transparent"}),value:e.value,w:"200px"})]})}function $r({sort:e,index:t,sortableColumns:a$1,onAccessorChange:s,onDirectionChange:r,onRemoveSort:n}){let{i18n:o}=T(),{ref:l,handleRef:p}=useSortable({id:e.accessor,index:t});return jsxs(Group,{align:"center",gap:"xs",ref:l,wrap:"nowrap",children:[jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:a$1.map(m=>({label:m.title?.toString()??"",value:m.accessor})),onChange:m=>s(e.accessor,m),searchable:true,size:"xs",value:e.accessor}),jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:Object.values(a).map(m=>({label:o.sort[m]??"",value:m})),onChange:m=>r(e.accessor,m),size:"xs",value:e.direction}),jsx(ActionIcon,{"aria-label":"Remove sort",onClick:()=>n(e.accessor),size:"md",variant:"default",children:jsx(IconTrash,{size:16})}),jsx(ActionIcon,{"aria-label":"Drag to reorder",ref:p,size:"md",style:{cursor:"grab",flexShrink:0},variant:"default",children:jsx(IconGripHorizontal,{size:16})})]})}function Yr(){let{sorts:e,setSorts:t,resetSorts:a$1}=te(),{columns:s,i18n:r}=T(),n=s.filter(g=>g.extend?.sortable),o=n.filter(g=>!e.some(c=>c.accessor===g.accessor)),l=e.length,p=()=>{if(o.length>0&&o[0]){let g={accessor:o[0].accessor,direction:a.ASC};t([...e,g]);}},m=()=>{a$1();},i=g=>{t(e.filter(c=>c.accessor!==g));},u=(g,c)=>{if(c===null)return;let d=e.filter(E=>E.accessor!==g&&E.accessor!==c);t([...d,{accessor:c,direction:e.find(E=>E.accessor===g)?.direction||a.ASC}]);},P=(g,c)=>{c!==null&&t(e.map(d=>d.accessor===g?{...d,direction:c}:d));},f=g=>{if(g.canceled)return;let{source:c}=g.operation;if(c&&isSortable(c)){let{initialIndex:d,index:E}=c;if(d!==E){let h=[...e],[b]=h.splice(d,1);b&&h.splice(E,0,b),t(h);}}};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconArrowsSort,{size:16}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:l}),variant:"default",children:r.sort.sort})}),jsxs(Popover.Dropdown,{p:"sm",children:[jsx(DragDropProvider,{onDragEnd:f,children:jsx(Stack,{gap:"xs",children:e.map((g,c)=>jsx($r,{index:c,onAccessorChange:u,onDirectionChange:P,onRemoveSort:i,sort:g,sortableColumns:n},g.accessor))})}),jsx(Space,{h:"sm"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:o.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:p,size:"xs",variant:"filled",children:r.sort.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:m,size:"xs",variant:"default",children:r.sort.resetSort})]})]})]})}function jr({useDataTableColumnsProps:e,columns:t,queryParamsAdapter:a,urlKeys:s,defaultParams:r,paginationProps:n,i18n:o}){let l=useMemo(()=>({...f,...s}),[JSON.stringify(s)]),p=useMemo(()=>({...g,...r}),[JSON.stringify(r)]),m=useMemo(()=>({...j$1,...o}),[JSON.stringify(o)]),i=useDataTableColumns(e??{key:"mde-default",columns:t});return {columns:t,urlKeys:l,defaultParams:p,i18n:m,queryParamsAdapter:a,useDataTableColumnsResult:{...i,key:e?.key??"mde-default"},paginationProps:{recordsPerPageOptions:n?.recordsPerPageOptions??h}}}function to(e){return useMemo(()=>e(),[e])}export{Ct as MDEColumnsToggle,Sr as MDEFilter,Mr as MDEPagination,dt as MDEProvider,Vr as MDESearch,Yr as MDESortList,wt as MantineDatatableExtended,to as createMDEColumnsHelper,Ne as createNuqsQueryParamsAdapter,Ge as createTanStackRouterQueryParamsAdapter,jr as useMDE,D as useMDEFilters,j as useMDEPage,ee as useMDEPageSize,Ft as useMDEQueryParams,q as useMDESearch,te as useMDESorts};

package/dist/server.d.ts

@@ -1,11 +1,14 @@
 import * as nuqs_server from 'nuqs/server';
-import { a as TDteContextProps } from './data-table-provider.type-dlzY73EE.js';
+import { c as TUrlKeys, d as TDefaultParams } from './data-table-provider.type-DPvItGHz.js';
 import 'react';
 import 'mantine-datatable';
 import 'zod';
 
-type TCreateDteLoaderProps = Pick<TDteContextProps, "urlKeys" | "defaultParams">;
-declare function createDteLoader(props?: TCreateDteLoaderProps): nuqs_server.LoaderFunction<{
+type TCreateMDELoaderProps = {
+    urlKeys?: Partial<TUrlKeys>;
+    defaultParams?: Partial<TDefaultParams>;
+};
+declare function createMDELoader(props?: TCreateMDELoaderProps): nuqs_server.LoaderFunction<{
     [x: string]: (Omit<nuqs_server.SingleParserBuilder<number>, "parseServerSide"> & {
         readonly defaultValue: number;
         parseServerSide(value: string | string[] | undefined): number;
@@ -51,4 +54,4 @@ declare function createDteLoader(props?: TCreateDteLoaderProps): nuqs_server.Loa
     });
 }>;
 
-export { type TCreateDteLoaderProps, createDteLoader };
+export { type TCreateMDELoaderProps, createMDELoader };

package/dist/server.mjs

@@ -1 +1 @@
-import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z}from'zod';var i={ASC:"asc",DESC:"desc"},c={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var n=z.object({accessor:z.string(),direction:z.enum(i)}),p=z.object({accessors:z.array(z.string()),value:z.string()}),f=z.object({variant:z.enum(c),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function C(y={}){let r={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},t={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:o,defaultParams:s}=y;o&&(r=o),s&&(t={...t,...s});let S={[`${r.page}`]:parseAsInteger.withDefault(t.page),[`${r.pageSize}`]:parseAsInteger.withDefault(t.pageSize),[`${r.sorts}`]:parseAsJson(z.array(n)).withDefault(t.sorts),[`${r.search}`]:parseAsJson(p).withDefault(t.search),[`${r.filters}`]:parseAsJson(z.array(f)).withDefault(t.filters)};return createLoader(S)}export{C as createDteLoader};
+import {f,g,e,d,c}from'./chunk-EDD26HQ2.mjs';import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z}from'zod';function L(m={}){let{urlKeys:c$1,defaultParams:u}=m,e$1={...f,...c$1},r={...g,...u},h={[`${e$1.page}`]:parseAsInteger.withDefault(r.page),[`${e$1.pageSize}`]:parseAsInteger.withDefault(r.pageSize),[`${e$1.sorts}`]:parseAsJson(z.array(c)).withDefault(r.sorts),[`${e$1.search}`]:parseAsJson(d).withDefault(r.search),[`${e$1.filters}`]:parseAsJson(z.array(e)).withDefault(r.filters)};return createLoader(h)}export{L as createMDELoader};

package/dist/styles.css

@@ -0,0 +1,34 @@
+.mantine-mde-checkbox-root {
+	&:hover {
+		background-color: var(--mantine-color-gray-1);
+	}
+}
+
+[data-mantine-color-scheme="dark"] .mantine-mde-checkbox-root:hover {
+	background-color: var(--mantine-color-dark-8);
+}
+.mantine-mde-checkbox-body {
+	display: flex;
+	align-items: center;
+	padding-left: var(--mantine-spacing-sm);
+	padding-right: var(--mantine-spacing-lg);
+}
+.mantine-mde-checkbox-label-wrapper {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+.mantine-mde-checkbox-label {
+	font-size: var(--mantine-font-size-xs);
+	padding-top: var(--mantine-spacing-xs);
+	padding-bottom: var(--mantine-spacing-xs);
+	cursor: pointer;
+}
+.mantine-mde-checkbox-input {
+	cursor: pointer;
+}
+.mantine-mde-checkbox-icon {
+	scale: 0.8;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFudGluZS1tZGUtY2hlY2tib3gtcm9vdCB7XG5cdCY6aG92ZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLW1hbnRpbmUtY29sb3ItZ3JheS0xKTtcblx0fVxufVxuXG5bZGF0YS1tYW50aW5lLWNvbG9yLXNjaGVtZT1cImRhcmtcIl0gLm1hbnRpbmUtbWRlLWNoZWNrYm94LXJvb3Q6aG92ZXIge1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tYW50aW5lLWNvbG9yLWRhcmstOCk7XG59XG4ubWFudGluZS1tZGUtY2hlY2tib3gtYm9keSB7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdHBhZGRpbmctbGVmdDogdmFyKC0tbWFudGluZS1zcGFjaW5nLXNtKTtcblx0cGFkZGluZy1yaWdodDogdmFyKC0tbWFudGluZS1zcGFjaW5nLWxnKTtcbn1cbi5tYW50aW5lLW1kZS1jaGVja2JveC1sYWJlbC13cmFwcGVyIHtcblx0ZGlzcGxheTogZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXHR3aWR0aDogMTAwJTtcbn1cbi5tYW50aW5lLW1kZS1jaGVja2JveC1sYWJlbCB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tbWFudGluZS1mb250LXNpemUteHMpO1xuXHRwYWRkaW5nLXRvcDogdmFyKC0tbWFudGluZS1zcGFjaW5nLXhzKTtcblx0cGFkZGluZy1ib3R0b206IHZhcigtLW1hbnRpbmUtc3BhY2luZy14cyk7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tYW50aW5lLW1kZS1jaGVja2JveC1pbnB1dCB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tYW50aW5lLW1kZS1jaGVja2JveC1pY29uIHtcblx0c2NhbGU6IDAuODtcbn1cbiJdfQ== */

package/dist/styles.layer.css

@@ -1 +1,3 @@
-@import "./index.css" layer(mantine-datatable-extended);
+@import "./styles.css" layer(mantine-datatable-extended);
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMubGF5ZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlcy5sYXllci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCIgbGF5ZXIobWFudGluZS1kYXRhdGFibGUtZXh0ZW5kZWQpO1xuIl19 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mantine-datatable-extended",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "An extension library for Mantine DataTable, providing powerful and easy-to-use features for building data tables in React applications.",
   "tags": [
     "mantine",
@@ -26,22 +26,14 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.mjs"
     },
     "./server": {
       "types": "./dist/server.d.ts",
-      "import": "./dist/server.mjs",
-      "require": "./dist/server.cjs"
+      "import": "./dist/server.mjs"
     },
-    "./styles.css": {
-      "development": "./src/style.css",
-      "default": "./dist/index.css"
-    },
-    "./styles.layer.css": {
-      "development": "./src/styles.layer.css",
-      "default": "./dist/styles.layer.css"
-    }
+    "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css"
   },
   "files": [
     "./dist",
@@ -49,14 +41,19 @@
     "./LICENSE"
   ],
   "devDependencies": {
+    "@tanstack/react-router": "^1.141.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
     "tsup": "^8.0.0",
     "typescript": "^5",
     "@repo/config": "0.0.0"
   },
   "peerDependencies": {
     "@dnd-kit/react": ">=0.3",
+    "@tanstack/react-router": ">=1.43",
     "@mantine/core": ">=8.3",
     "@mantine/dates": ">=8.3",
     "@mantine/hooks": ">=8.3",
@@ -69,9 +66,19 @@
     "react-dom": ">=19",
     "zod": ">=4.1"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "nuqs": {
+      "optional": true
+    }
+  },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+    "build": "rm -rf dist; tsup; postcss src/styles*.css --dir dist",
+    "dev:bundle-css": "postcss src/styles*.css --dir dist --watch",
+    "dev:bundle-ts": "tsup --watch",
+    "dev": "run-p dev:*"
   }
 }

package/dist/index.css

@@ -1 +0,0 @@
-.mantine-dte-checkbox-root{&:hover{background-color:var(--mantine-color-gray-1)}}[data-mantine-color-scheme=dark] .mantine-dte-checkbox-root:hover{background-color:var(--mantine-color-dark-8)}.mantine-dte-checkbox-body{display:flex;align-items:center;padding-left:var(--mantine-spacing-sm);padding-right:var(--mantine-spacing-lg)}.mantine-dte-checkbox-label-wrapper{display:flex;justify-content:space-between;width:100%}.mantine-dte-checkbox-label{font-size:var(--mantine-font-size-xs);padding-top:var(--mantine-spacing-xs);padding-bottom:var(--mantine-spacing-xs);cursor:pointer}.mantine-dte-checkbox-input{cursor:pointer}.mantine-dte-checkbox-icon{scale:.8}