mantine-datatable-extended 0.2.0 → 0.3.1

package/README.md

@@ -15,11 +15,11 @@ Mantine and Mantine DataTable are excellent libraries, trusted and used by many
 
 ### 🎯 Standardized Components
 
-- **DataTableSearch**: Search with multi-column selection
-- **DataTableFilter**: Filter data with various filter types (text, number, date, select, range...)
-- **DataTableSortList**: Sort by multiple columns simultaneously
-- **DataTableColumnsToggle**: Show/hide columns
-- **DataTablePagination**: Flexible pagination that can be placed anywhere
+- **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
 
 ### 🔗 URL State Management
 
@@ -50,6 +50,7 @@ pnpm add mantine-datatable-extended mantine-datatable @mantine/dates dayjs nuqs
 
 **Peer Dependencies:**
 
+- `@dnd-kit/react` >= 0.3
 - `@mantine/core` >= 8.3
 - `@mantine/dates` >= 8.3
 - `@mantine/hooks` >= 8.3
@@ -90,19 +91,19 @@ export default function RootLayout({ children }) {
 "use client";
 
 import {
-  DataTableExtended,
-  DataTableProvider,
-  DataTableSearch,
-  DataTableFilter,
-  DataTableSortList,
-  DataTableColumnsToggle,
-  DataTablePagination,
-  type DataTableExtendedColumnProps,
+  DteExtended,
+  DteProvider,
+  DteSearch,
+  DteFilter,
+  DteSortList,
+  DteColumnsToggle,
+  DtePagination,
+  type TDteColumnProps,
 } from "mantine-datatable-extended";
 import { useDataTableColumns } from "mantine-datatable";
 import { Group, Space } from "@mantine/core";
 
-const columns: DataTableExtendedColumnProps[] = [
+const columns: TDteColumnProps[] = [
   {
     accessor: "name",
     title: "Name",
@@ -123,27 +124,27 @@ export default function MyTable() {
   });
 
   return (
-    <DataTableProvider
+    <DteProvider
       columns={columns}
       originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
       storeColumnsKey="my-table"
     >
       <Group justify="space-between">
         <Group>
-          <DataTableSearch />
-          <DataTableFilter />
+          <DteSearch />
+          <DteFilter />
         </Group>
         <Group>
-          <DataTableSortList />
-          <DataTableColumnsToggle />
+          <DteSortList />
+          <DteColumnsToggle />
         </Group>
       </Group>
 
       <Space h="md" />
-      <DataTableExtended records={data} />
+      <DteExtended records={data} />
       <Space h="md" />
-      <DataTablePagination />
-    </DataTableProvider>
+      <DtePagination />
+    </DteProvider>
   );
 }
 ```

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

@@ -1,7 +1,11 @@
+import * as react from 'react';
 import { DataTableColumn, useDataTableColumns } from 'mantine-datatable';
 import { z } from 'zod';
 
-type FilterMultiSelectOptions = {
+/**
+ * Options for multi-select filter variant.
+ */
+type TFilterMultiSelectOptions = {
     data: {
         value: string;
         label: string;
@@ -9,7 +13,10 @@ type FilterMultiSelectOptions = {
         icon?: React.ReactNode;
     }[];
 };
-type FilterSingleSelectOptions = {
+/**
+ * Options for single-select filter variant.
+ */
+type TFilterSingleSelectOptions = {
     data: {
         value: string;
         label: string;
@@ -17,14 +24,18 @@ type FilterSingleSelectOptions = {
         icon?: React.ReactNode;
     }[];
 };
-type FilterNumberRangeOptions = {
+/**
+ * Options for number range filter variant.
+ */
+type TFilterNumberRangeOptions = {
     min: number;
     max: number;
     step?: number;
     minRange?: number;
+    suffix?: string;
 };
 
-type BaseExtend = {
+type TBaseExtend = {
     /**
      * Whether the column is searchable.
      */
@@ -38,24 +49,28 @@ type BaseExtend = {
      */
     filterable?: boolean;
 };
-type FilterableExtend = BaseExtend & ({
+type TFilterableExtend = TBaseExtend & ({
     filterVariant?: "text" | "number" | "date" | "date_range";
     filterOptions?: never;
 } | {
     filterVariant: "number_range";
-    filterOptions: FilterNumberRangeOptions;
+    filterOptions: TFilterNumberRangeOptions;
 } | {
     filterVariant: "single_select";
-    filterOptions: FilterSingleSelectOptions;
+    filterOptions: TFilterSingleSelectOptions;
 } | {
     filterVariant: "multi_select";
-    filterOptions: FilterMultiSelectOptions;
+    filterOptions: TFilterMultiSelectOptions;
 });
-type DataTableExtendedColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, "sortable" | "sortKey" | "filter" | "filterPopoverProps" | "filterPopoverDisableClickOutside" | "filtering" | "ellipsis" | "noWrap"> & {
+/**
+ * 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"> & {
     /**
      * The extended properties of the column.
      */
-    extend?: FilterableExtend;
+    extend?: TFilterableExtend;
 } & ({
     /**
      * If true, cell content in this column will be truncated with ellipsis as needed and will not wrap
@@ -102,7 +117,100 @@ declare const filterSchema: z.ZodObject<{
 }, z.core.$strip>;
 type TFilterCondition = z.infer<typeof filterSchema>;
 
-type UrlKeysType = {
+type TDteViewOptions = {
+    /**
+     * The label for the columns toggle button.
+     */
+    columnsToggle: string;
+    /**
+     * The placeholder for the columns search input.
+     */
+    columnsToggleSearchPlaceholder: string;
+};
+type TDteSortOptions = {
+    /**
+     * The label for the sort button.
+     */
+    sort: string;
+    /**
+     * The label for the add sort button.
+     */
+    addSort: string;
+    /**
+     * The label for the reset sort button.
+     */
+    resetSort: string;
+    /**
+     * The label for the ascending sort direction.
+     */
+    asc: string;
+    /**
+     * The label for the descending sort direction.
+     */
+    desc: string;
+};
+type TDteSearchOptions = {
+    /**
+     * The label for the search input placeholder.
+     */
+    search: string;
+    /**
+     * The placeholder for the search accessors filter input.
+     */
+    searchAccessorsSearchPlaceholder: string;
+};
+type TDteFilterOptions = {
+    /**
+     * The label for the reset filter button.
+     */
+    resetFilter: string;
+};
+type TDtePaginationOptions = {
+    /**
+     * The label for the rows per page.
+     */
+    rowsPerPage: string;
+    /**
+     * The label for the page of total pages.
+     * The first string is "Page".
+     * The second string is "of".
+     */
+    pageOfTotalPages: [string, string];
+    /**
+     * The label for the start record - end record / total records.
+     * The first string is "From".
+     * The second string is "to".
+     * The third string is "of total".
+     */
+    startEndRecordOfTotalRecords: [string, string, string];
+};
+/**
+ * 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;
+};
+/**
+ * Input type for i18n prop in DteProvider.
+ * 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>;
+};
+
+/**
+ * URL query parameter keys for DataTable state (page, pageSize, sorts, search, filters).
+ */
+type TUrlKeys = {
     /**
      * The key of the page parameter.
      */
@@ -124,7 +232,10 @@ type UrlKeysType = {
      */
     filters: string;
 };
-type DefaultParamsType = {
+/**
+ * Default values for DataTable query parameters.
+ */
+type TDefaultParams = {
     /**
      * The default page number.
      */
@@ -146,7 +257,10 @@ type DefaultParamsType = {
      */
     filters?: TFilterCondition[];
 };
-type PaginationPropsType = {
+/**
+ * Pagination configuration passed to DataTable context.
+ */
+type TPaginationProps = {
     /**
      * The total records.
      */
@@ -156,16 +270,19 @@ type PaginationPropsType = {
      */
     recordsPerPageOptions: number[];
 };
-type DataTableContextProps<T = Record<string, unknown>> = {
+/**
+ * Context value type for DteProvider.
+ */
+type TDteContextProps<T = Record<string, unknown>> = {
     /**
      * The keys of the URL parameters.
      * Useful for multiple data tables on the same page.
      */
-    urlKeys?: UrlKeysType;
+    urlKeys?: TUrlKeys;
     /**
      * The default parameters of the data table.
      */
-    defaultParams?: DefaultParamsType;
+    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.
@@ -176,7 +293,7 @@ type DataTableContextProps<T = Record<string, unknown>> = {
      * The columns of the data table.
      * This is use original column properties from mantine-datatable with "extend" property.
      */
-    columns: DataTableExtendedColumnProps<T>[];
+    columns: TDteColumnProps<T>[];
     /**
      * The result of the useDataTableColumns hook from mantine-datatable.
      */
@@ -184,7 +301,7 @@ type DataTableContextProps<T = Record<string, unknown>> = {
     /**
      * The pagination props.
      */
-    paginationProps?: PaginationPropsType;
+    paginationProps?: TPaginationProps;
     /**
      * The function to set the pagination total records.
      */
@@ -193,6 +310,19 @@ type DataTableContextProps<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.
+ */
+type TDteProviderProps<T = Record<string, unknown>> = Omit<TDteContextProps<T>, "i18n"> & {
+    children: react.ReactNode;
+    i18n?: TDteI18nInput;
 };
 
-export type { DataTableContextProps as D, DataTableExtendedColumnProps as a };
+export type { TDteProviderProps as T, TDteContextProps as a, TDteColumnProps as b, TDteI18nInput as c };

package/dist/index.css

@@ -0,0 +1 @@
+.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}

package/dist/index.d.ts

@@ -1,100 +1,28 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DataTableProps, DataTablePaginationProps, DataTableSortProps } from 'mantine-datatable';
 import * as nuqs from 'nuqs';
-import { D as DataTableContextProps } from './data-table-provider.type-CblXE_l1.js';
-export { a as DataTableExtendedColumnProps } from './data-table-provider.type-CblXE_l1.js';
+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 'react';
 import 'zod';
 
-type i18nDataTableViewOptions = {
-    /**
-     * The label for the columns toggle button.
-     */
-    columnsToggle: string;
-};
-type i18nDataTableSortOptions = {
-    /**
-     * The label for the sort button.
-     */
-    sort: string;
-    /**
-     * The label for the add sort button.
-     */
-    addSort: string;
-    /**
-     * The label for the reset sort button.
-     */
-    resetSort: string;
-    /**
-     * The label for the ascending sort direction.
-     */
-    asc: string;
-    /**
-     * The label for the descending sort direction.
-     */
-    desc: string;
-};
-type i18nDataTableSearchOptions = {
-    /**
-     * The label for the search input placeholder.
-     */
-    search: string;
-};
-type i18nDataTableFilterOptions = {
-    /**
-     * The label for the reset filter button.
-     */
-    resetFilter: string;
-};
-type i18nDataTablePaginationOptions = {
-    /**
-     * The label for the rows per page.
-     */
-    rowsPerPage: string;
-    /**
-     * The label for the page of total pages.
-     * The first string is "Page".
-     * The second string is "of".
-     */
-    pageOfTotalPages: [string, string];
-    /**
-     * The label for the start record - end record / total records.
-     * The first string is "From".
-     * The second string is "to".
-     * The third string is "of total".
-     */
-    startEndRecordOfTotalRecords: [string, string, string];
-};
+declare function DteColumnsToggle(): react_jsx_runtime.JSX.Element;
 
-type TDataTableColumnsToggleProps = {
-    i18n?: i18nDataTableViewOptions;
-};
-declare function DataTableColumnsToggle({ i18n, }: TDataTableColumnsToggleProps): react_jsx_runtime.JSX.Element;
-
-type TDataTableExtendedProps<T = Record<string, unknown>> = Omit<DataTableProps<T>, "storeColumnsKey" | "groups" | "columns" | keyof DataTablePaginationProps | keyof DataTableSortProps>;
-declare function DataTableExtended<T = Record<string, unknown>>(props: TDataTableExtendedProps<T>): react_jsx_runtime.JSX.Element;
+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;
 
-type TDataTableFilterProps = {
-    i18n?: i18nDataTableFilterOptions;
-};
-declare function DataTableFilter({ i18n }: TDataTableFilterProps): react_jsx_runtime.JSX.Element;
+declare function DteFilter(): react_jsx_runtime.JSX.Element;
 
-type TDataTablePaginationProps = {
+type TDtePaginationProps = {
     recordsPerPageOptions?: number[];
-    i18n?: i18nDataTablePaginationOptions;
 };
-declare function DataTablePagination({ recordsPerPageOptions, i18n, }: TDataTablePaginationProps): false | react_jsx_runtime.JSX.Element;
+declare function DtePagination({ recordsPerPageOptions, }: TDtePaginationProps): false | react_jsx_runtime.JSX.Element;
 
-type TDataTableSearchProps = {
-    i18n?: i18nDataTableSearchOptions;
-};
-declare function DataTableSearch({ i18n }: TDataTableSearchProps): react_jsx_runtime.JSX.Element;
+declare function DteSearch(): react_jsx_runtime.JSX.Element;
 
-type TDataTableSortListProps = {
-    i18n?: i18nDataTableSortOptions;
-};
-declare function DataTableSortList({ i18n, }: TDataTableSortListProps): react_jsx_runtime.JSX.Element;
+declare function DteSortList(): react_jsx_runtime.JSX.Element;
 
-declare function useDataTableQueryParams(): {
+declare function useDteQueryParams(): {
     page: number;
     setPage: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
     pageSize: number;
@@ -153,10 +81,7 @@ declare function useDataTableQueryParams(): {
     resetAll: () => void;
 };
 
-declare function useDataTableContext<T = Record<string, unknown>>(): DataTableContextProps<T>;
-type DataTableProviderProps<T = Record<string, unknown>> = {
-    children: React.ReactNode;
-} & DataTableContextProps<T>;
-declare function DataTableProvider<T = Record<string, unknown>>({ children, urlKeys, defaultParams, storeColumnsKey, columns, originalUseDataTableColumnsResult, }: DataTableProviderProps<T>): react_jsx_runtime.JSX.Element;
+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;
 
-export { DataTableColumnsToggle, DataTableContextProps, DataTableExtended, DataTableFilter, DataTablePagination, DataTableProvider, DataTableSearch, DataTableSortList, useDataTableContext, useDataTableQueryParams };
+export { DteColumnsToggle, DteExtended, DteFilter, DtePagination, DteProvider, DteSearch, DteSortList, TDteProviderProps, useDteContext, useDteQueryParams };

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-import {Popover,Button,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,TextInput,CloseButton,Badge,Grid,Select,ActionIcon,Indicator,RangeSlider,NumberInput}from'@mantine/core';import {IconColumns,IconSort09,IconTrash,IconPlus,IconRefresh,IconX,IconSearch}from'@tabler/icons-react';import Ht,{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 Te,{z}from'zod';import {DatePicker}from'@mantine/dates';import z$1 from'dayjs';var pe=createContext(void 0);function P(){let a=useContext(pe);if(!a)throw new Error("useDataTableContext must be used within a DataTableProvider");return a}function Ge({children:a,urlKeys:e,defaultParams:p,storeColumnsKey:o,columns:s,originalUseDataTableColumnsResult:r}){if(!o)throw new Error("storeColumnsKey property is required");if(!s)throw new Error("columns property is required");let[t,u]=useState(0),[m,g]=useState([10,20,30,40,50]),i=useMemo(()=>({totalRecords:t,recordsPerPageOptions:m}),[t,m]),l=useMemo(()=>({urlKeys:e,defaultParams:p,storeColumnsKey:o,columns:s,originalUseDataTableColumnsResult:r,paginationProps:i,setTotalRecords:u,setRecordsPerPageOptions:g}),[e,p,o,s,r,i]);return jsx(pe.Provider,{value:{...l},children:a})}var Ue={columnsToggle:"Columns Toggle"};function Xe({i18n:a=Ue}){let{originalUseDataTableColumnsResult:e}=P(),{effectiveColumns:p,columnsToggle:o,setColumnsToggle:s}=e,r=t=>{s(o.map(u=>u.accessor===t.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(IconColumns,{}),variant:"default",children:a.columnsToggle})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:o.filter(t=>t.toggleable).map(t=>jsx(Checkbox,{checked:t.toggled,label:p.find(u=>u.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>r(t),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor))})})]})}function qe(a){let{storeColumnsKey:e,originalUseDataTableColumnsResult:p}=P(),{effectiveColumns:o}=p,s={...a,columns:o,storeColumnsKey:e};return jsx(DataTable,{...s})}var B={ASC:"asc",DESC:"desc"},v={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var ue=z.object({accessor:z.string(),direction:z.enum(B)}),de=z.object({accessors:z.array(z.string()),value:z.string()}),me=z.object({variant:z.enum(v),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function T(){let a={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},e={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:p,defaultParams:o}=P();p&&(a=p),o&&(e={...e,...o});let[s,r]=useQueryState(a.page,parseAsInteger.withDefault(e.page)),[t,u]=useQueryState(a.pageSize,parseAsInteger.withDefault(e.pageSize)),[m,g]=useQueryState(a.sorts,parseAsJson(Te.array(ue)).withDefault(e.sorts)),[i,l]=useQueryState(a.search,parseAsJson(de).withDefault(e.search)),[c,n]=useQueryState(a.filters,parseAsJson(Te.array(me)).withDefault(e.filters)),d=()=>{r(e.page);},f=()=>{u(e.pageSize);},D=()=>{g(e.sorts);},I=()=>{l(e.search);},ie=()=>{n(e.filters);};return {page:s,setPage:r,pageSize:t,setPageSize:u,sorts:m,setSorts:g,search:i,setSearch:l,filters:c,setFilters:n,resetPage:d,resetPageSize:f,resetSorts:D,resetSearch:I,resetFilters:ie,resetAll:()=>{d(),f(),D(),I(),ie();}}}function De({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(l=>l.accessor===e),t=r?.value?1:0,[u,m]=useState(r?z$1(Number.parseInt(r.value,10)).toISOString():null),g=l=>{if(m(l),l){let c=z$1(l).valueOf().toString();s(r?o.map(n=>n.accessor===e?{...n,value:c}:n):[...o,{variant:p,accessor:e,value:c}]);}},i=()=>{m(null),s(o.filter(l=>l.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{onChange:g,value:u})})]})}function he({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(l=>l.accessor===e),t=r?.value.length??0,[u,m]=useState(r?.value[0]&&r?.value[1]?[z$1(Number.parseInt(r.value[0],10)).toISOString(),z$1(Number.parseInt(r.value[1],10)).toISOString()]:[null,null]),g=([l,c])=>{if(m([l,c]),l&&c){let[n,d]=[z$1(l).valueOf().toString(),z$1(c).valueOf().toString()];s(r?o.map(f=>f.accessor===e?{...f,value:[n,d]}:f):[...o,{variant:p,accessor:e,value:[n,d]}]);}},i=()=>{m([null,null]),s(o.filter(l=>l.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,onChange:g,type:"range",value:u})})]})}function ve({column:a}){let e=a.accessor,p=a.extend?.filterVariant,s=(a.extend?.filterOptions).data,{filters:r,setFilters:t}=T(),u=r.find(c=>c.accessor===e),m=u?.value.length??0,g=c=>{let n=u?.value??[],d=n.includes(c)?n.filter(f=>f!==c):[...n,c];if(d.length===0)t(r.filter(f=>f.accessor!==e));else {let f=r.some(D=>D.accessor===e);t(f?r.map(D=>D.accessor===e?{...D,value:d}:D):[...r,{variant:p,accessor:e,value:d}]);}},i=c=>r.some(n=>n.accessor===e&&n.value.includes(c)),l=()=>{t(r.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:m<=0,processing:true,children:jsxs(Button.Group,{children:[m>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(c=>jsx(Checkbox,{checked:i(c.value),label:c.label,labelPosition:"left",onChange:()=>g(c.value),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${c.value}`))})})]})}function ye({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(i=>i.accessor===e),t=r?.value.length??0,u=i=>{s(r?o.map(l=>l.accessor===e?{...l,value:i.toString()}:l):[...o,{variant:p,accessor:e,value:i.toString()}]);},m=i=>{let l=i;typeof i=="string"&&(l=Number.parseInt(i,10)),u(l);},g=()=>{s(o.filter(i=>i.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(NumberInput,{onChange:i=>m(i),value:r?.value?Number.parseInt(r.value,10):void 0})})]})}function we({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{min:o,max:s,step:r=1,minRange:t=1}=a.extend?.filterOptions,{filters:u,setFilters:m}=T(),g=u.find(d=>d.accessor===e),i=g?.value.length??0,l=d=>{let[f,D]=[d[0].toString(),d[1].toString()];m(g?u.map(I=>I.accessor===e?{...I,value:[f,D]}:I):[...u,{variant:p,accessor:e,value:[f,D]}]);},c=([d,f])=>{l([d,f]);},n=()=>{m(u.filter(d=>d.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:i<=0,processing:true,children:jsxs(Button.Group,{children:[i>0&&jsx(Button,{onClick:n,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(RangeSlider,{max:s,min:o,minRange:t,onChange:c,step:r,value:g?.value[0]&&g?.value[1]?[Number.parseInt(g.value[0],10),Number.parseInt(g.value[1],10)]:[o,s]})})]})}function Re({column:a}){let e=a.accessor,p=a.extend?.filterVariant,s=(a.extend?.filterOptions).data,{filters:r,setFilters:t}=T(),u=r.find(c=>c.accessor===e),m=u?.value.length??0,g=c=>{t(u?r.map(n=>n.accessor===e?{...n,value:c}:n):[...r,{variant:p,accessor:e,value:c}]);},i=c=>u?.value===c,l=()=>{t(r.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:m<=0,processing:true,children:jsxs(Button.Group,{children:[m>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(c=>jsx(Checkbox,{checked:i(c.value),label:c.label,labelPosition:"left",onChange:()=>g(c.value),radius:"xl",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${c.value}`))})})]})}function ke({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(i=>i.accessor===e),t=r?.value.length??0,u=i=>{s(r?i===""?o.filter(l=>l.accessor!==e):o.map(l=>l.accessor===e?{...l,value:i}:l):[...o,{variant:p,accessor:e,value:i}]);},m=i=>{u(i);},g=()=>{s(o.filter(i=>i.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(TextInput,{onChange:i=>m(i.target.value),value:r?.value??""})})]})}var vt={resetFilter:"Reset Filter"};function xt({i18n:a=vt}){let{filters:e,resetFilters:p}=T(),{columns:o}=P(),s=()=>{p();},r=o.filter(t=>t.extend?.filterable);return jsxs(Group,{gap:"xs",children:[r.map(t=>{switch(t.extend?.filterVariant){case v.TEXT:return jsx(ke,{column:t},t.accessor);case v.NUMBER:return jsx(ye,{column:t},t.accessor);case v.SINGLE_SELECT:return jsx(Re,{column:t},t.accessor);case v.MULTI_SELECT:return jsx(ve,{column:t},t.accessor);case v.DATE:return jsx(De,{column:t},t.accessor);case v.DATE_RANGE:return jsx(he,{column:t},t.accessor);case v.NUMBER_RANGE:return jsx(we,{column:t},t.accessor);default:return null}}),e.length>0&&jsx(Button,{onClick:s,variant:"default",children:a.resetFilter})]})}var Rt={rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]};function Et({recordsPerPageOptions:a=[10,20,30,40,50],i18n:e=Rt}){let{page:p,pageSize:o,setPage:s,setPageSize:r}=T(),{paginationProps:t}=P(),{totalRecords:u}=t||{},[m,g]=useState(0),[{startRecord:i,endRecord:l},c]=useState({startRecord:0,endRecord:0});return useEffect(()=>{g(Math.ceil((u||0)/(o||(a[0]??10))));},[u,o,a]),useEffect(()=>{c({startRecord:(p-1)*o+1,endRecord:Math.min(p*o,u||0)});},[p,o,u]),m>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[e.startEndRecordOfTotalRecords[0]," ",i," ",e.startEndRecordOfTotalRecords[1]," ",l," ",e.startEndRecordOfTotalRecords[2]," ",u]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:e.rowsPerPage}),jsx(NativeSelect,{data:a.map(n=>({label:n.toString(),value:n.toString()})),onChange:n=>r(Number(n.target.value)),size:"xs",value:o,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[e.pageOfTotalPages[0]," ",p," ",e.pageOfTotalPages[1]," ",m]}),jsx(Pagination,{onChange:n=>s(n),size:"sm",total:m,value:p,withControls:true,withEdges:true})]})]})}function Mt(){let{columns:a}=P(),{search:e,setSearch:p}=T(),o=e.accessors.length,s=a.filter(t=>t.extend?.searchable),r=t=>{e.accessors.includes(t)?p({...e,accessors:e.accessors.filter(u=>u!==t)}):p({...e,accessors:[...e.accessors,t]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:o<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:o}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(t=>jsx(Checkbox,{checked:e.accessors.includes(t.accessor.toString()),label:t.title?.toString()??"",labelPosition:"left",onChange:()=>r(t.accessor.toString()),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor.toString()))})})]})}var Qt={search:"Search"};function Lt({i18n:a=Qt}){let{search:e,setSearch:p}=T(),o=s=>{p({...e,value:s});};return jsxs(Group,{gap:"xs",children:[jsx(Mt,{}),jsx(TextInput,{onChange:s=>o(s.target.value),placeholder:a.search,rightSection:e.value.length>0&&jsx(CloseButton,{onClick:()=>o(""),size:"sm",variant:"transparent"}),value:e.value,w:"200px"})]})}var Yt={sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"};function Zt({i18n:a=Yt}){let{sorts:e,setSorts:p,resetSorts:o}=T(),{columns:s}=P(),r=s.filter(n=>n.extend?.sortable),t=r.filter(n=>!e.some(d=>d.accessor===n.accessor)),u=e.length,m=()=>{if(t.length>0&&t[0]){let n={accessor:t[0].accessor,direction:B.ASC};p([...e,n]);}},g=()=>{o();},i=n=>{p(e.filter(d=>d.accessor!==n));},l=(n,d)=>{if(d===null)return;let f=e.filter(D=>D.accessor!==n&&D.accessor!==d);p([...f,{accessor:d,direction:e.find(D=>D.accessor===n)?.direction||B.ASC}]);},c=(n,d)=>{d!==null&&p(e.map(f=>f.accessor===n?{...f,direction:d}:f));};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconSort09,{}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:u}),variant:"default",children:a.sort})}),jsxs(Popover.Dropdown,{children:[jsx(Grid,{children:e.map(n=>jsxs(Ht.Fragment,{children:[jsx(Grid.Col,{span:6,children:jsx(Select,{comboboxProps:{withinPortal:false},data:r.map(d=>({label:d.title?.toString()??"",value:d.accessor})),onChange:d=>l(n.accessor,d),value:n.accessor})}),jsx(Grid.Col,{span:4,children:jsx(Select,{comboboxProps:{withinPortal:false},data:Object.values(B).map(d=>({label:a[d]??"",value:d})),onChange:d=>c(n.accessor,d),value:n.direction})}),jsx(Grid.Col,{span:1,style:{display:"flex",justifyContent:"center",alignItems:"center"},children:jsx(ActionIcon,{onClick:()=>i(n.accessor),size:"lg",variant:"default",children:jsx(IconTrash,{size:16})})})]},n.accessor))}),jsx(Space,{h:"md"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:t.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:m,size:"sm",variant:"filled",children:a.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:g,size:"sm",variant:"default",children:a.resetSort})]})]})]})}export{Xe as DataTableColumnsToggle,qe as DataTableExtended,xt as DataTableFilter,Et as DataTablePagination,Ge as DataTableProvider,Lt as DataTableSearch,Zt as DataTableSortList,P as useDataTableContext,T as useDataTableQueryParams};
+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};

package/dist/server.d.ts

@@ -1,9 +1,11 @@
 import * as nuqs_server from 'nuqs/server';
-import { D as DataTableContextProps } from './data-table-provider.type-CblXE_l1.js';
+import { a as TDteContextProps } from './data-table-provider.type-dlzY73EE.js';
+import 'react';
 import 'mantine-datatable';
 import 'zod';
 
-declare const createDataTableLoader: (props?: Pick<DataTableContextProps, "urlKeys" | "defaultParams">) => nuqs_server.LoaderFunction<{
+type TCreateDteLoaderProps = Pick<TDteContextProps, "urlKeys" | "defaultParams">;
+declare function createDteLoader(props?: TCreateDteLoaderProps): nuqs_server.LoaderFunction<{
     [x: string]: (Omit<nuqs_server.SingleParserBuilder<number>, "parseServerSide"> & {
         readonly defaultValue: number;
         parseServerSide(value: string | string[] | undefined): number;
@@ -49,4 +51,4 @@ declare const createDataTableLoader: (props?: Pick<DataTableContextProps, "urlKe
     });
 }>;
 
-export { createDataTableLoader };
+export { type TCreateDteLoaderProps, createDteLoader };

package/dist/server.mjs

@@ -1 +1 @@
-import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z as z$1}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$1.object({accessor:z$1.string(),direction:z$1.enum(i)}),p=z$1.object({accessors:z$1.array(z$1.string()),value:z$1.string()}),l=z$1.object({variant:z$1.enum(c),accessor:z$1.string(),value:z$1.union([z$1.string(),z$1.array(z$1.string())])});var z=(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$1.array(n)).withDefault(t.sorts),[`${r.search}`]:parseAsJson(p).withDefault(t.search),[`${r.filters}`]:parseAsJson(z$1.array(l)).withDefault(t.filters)};return createLoader(S)};export{z as createDataTableLoader};
+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};

package/dist/styles.layer.css

@@ -0,0 +1 @@
+@import "./index.css" layer(mantine-datatable-extended);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mantine-datatable-extended",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "An extension library for Mantine DataTable, providing powerful and easy-to-use features for building data tables in React applications.",
   "tags": [
     "mantine",
@@ -33,6 +33,14 @@
       "types": "./dist/server.d.ts",
       "import": "./dist/server.mjs",
       "require": "./dist/server.cjs"
+    },
+    "./styles.css": {
+      "development": "./src/style.css",
+      "default": "./dist/index.css"
+    },
+    "./styles.layer.css": {
+      "development": "./src/styles.layer.css",
+      "default": "./dist/styles.layer.css"
     }
   },
   "files": [
@@ -48,6 +56,7 @@
     "@repo/config": "0.0.0"
   },
   "peerDependencies": {
+    "@dnd-kit/react": ">=0.3",
     "@mantine/core": ">=8.3",
     "@mantine/dates": ">=8.3",
     "@mantine/hooks": ">=8.3",