mantine-datatable-extended 0.1.0

package/dist/data-table-extend.type-Dh8nSBAW.d.ts

@@ -0,0 +1,36 @@
+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>;
+
+type ExtendedDataTableProps = {
+    prefixQueryKey?: string;
+    defaultSorts?: TSortCondition[];
+};
+
+export { type ExtendedDataTableProps as E, type TSortCondition as T, type TSearchCondition as a, type TFilterCondition as b, sortSchema as c, filterSchema as f, searchSchema as s };

package/dist/index.d.ts

@@ -0,0 +1,205 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as mantine_datatable from 'mantine-datatable';
+import { DataTableColumn, useDataTableColumns } from 'mantine-datatable';
+import { T as TSortCondition, E as ExtendedDataTableProps, a as TSearchCondition, b as TFilterCondition } from './data-table-extend.type-Dh8nSBAW.js';
+export { f as filterSchema, s as searchSchema, c as sortSchema } from './data-table-extend.type-Dh8nSBAW.js';
+import * as nuqs from 'nuqs';
+import 'zod';
+
+declare const ESortDirection: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+};
+type ESortDirection = (typeof ESortDirection)[keyof typeof ESortDirection];
+declare const EFilterVariant: {
+    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";
+};
+type EFilterVariant = (typeof EFilterVariant)[keyof typeof EFilterVariant];
+
+type ExtendedDataTableColumnProps<T = Record<string, unknown>> = DataTableColumn<T> & {
+    extend?: {
+        searchable?: boolean;
+        sortable?: boolean;
+        filterable?: boolean;
+        filterVariant?: EFilterVariant;
+    };
+};
+
+type i18nDataTableViewOptions = {
+    columnsToggle: string;
+};
+type i18nDataTableSortOptions = {
+    sort: string;
+    addSort: string;
+    resetSort: string;
+    asc: string;
+    desc: string;
+};
+type i18nDataTableSearchOptions = {
+    search: string;
+};
+type i18nDataTableFilterOptions = {
+    resetFilter: string;
+};
+
+type TDataTableColumnsToggleProps<T = Record<string, unknown>> = {
+    columnStoreKey: string;
+    columns: ExtendedDataTableColumnProps<T>[];
+    i18n?: i18nDataTableViewOptions;
+};
+declare function DataTableColumnsToggle<T = Record<string, unknown>>({ columnStoreKey, columns, i18n, }: TDataTableColumnsToggleProps<T>): react_jsx_runtime.JSX.Element;
+
+type TDataTableFilterMultiSelectFacet<T = Record<string, unknown>> = {
+    accessor: keyof T | (string & NonNullable<unknown>);
+    data: {
+        value: string;
+        label: string;
+    }[];
+};
+
+type TDataTableFilterNumberOptions<T = Record<string, unknown>> = {
+    accessor: keyof T | (string & NonNullable<unknown>);
+    debounceTimeout?: number;
+};
+
+type TDataTableFilterNumberRangeOptions<T = Record<string, unknown>> = {
+    accessor: keyof T | (string & NonNullable<unknown>);
+    min: number;
+    max: number;
+    step?: number;
+    minRange?: number;
+    debounceTimeout?: number;
+};
+
+type TDataTableFilterTextOptions<T = Record<string, unknown>> = {
+    accessor: keyof T | (string & NonNullable<unknown>);
+    debounceTimeout?: number;
+};
+
+type TDataTableFilterProps<T = Record<string, unknown>> = {
+    prefixQueryKey?: string;
+    columns: ExtendedDataTableColumnProps<T>[];
+    facets?: TDataTableFilterMultiSelectFacet<T>[];
+    numberRangeOptions?: TDataTableFilterNumberRangeOptions<T>[];
+    textOptions?: TDataTableFilterTextOptions<T>[];
+    numberOptions?: TDataTableFilterNumberOptions<T>[];
+    i18n?: i18nDataTableFilterOptions;
+};
+declare function DataTableFilter<T = Record<string, unknown>>({ prefixQueryKey, columns, facets, numberRangeOptions, textOptions, numberOptions, i18n, }: TDataTableFilterProps<T>): react_jsx_runtime.JSX.Element;
+
+type TDataTableSearchProps<T = Record<string, unknown>> = {
+    prefixQueryKey?: string;
+    columns: ExtendedDataTableColumnProps<T>[];
+    i18n?: i18nDataTableSearchOptions;
+    debounceTimeout?: number;
+};
+declare function DataTableSearch<T = Record<string, unknown>>({ prefixQueryKey, columns, i18n, debounceTimeout, }: TDataTableSearchProps<T>): react_jsx_runtime.JSX.Element;
+
+type TDataTableSortListProps<T = Record<string, unknown>> = {
+    prefixQueryKey?: string;
+    columns: ExtendedDataTableColumnProps<T>[];
+    i18n?: i18nDataTableSortOptions;
+    defaultSorts?: TSortCondition[];
+};
+declare function DataTableSortList<T = Record<string, unknown>>({ prefixQueryKey, columns, i18n, defaultSorts, }: TDataTableSortListProps<T>): react_jsx_runtime.JSX.Element;
+
+type OriginalDataTableColumn<T = Record<string, unknown>> = Parameters<typeof useDataTableColumns<T>>[0];
+type TUseDataTableColumnsExtendProps<T = Record<string, unknown>> = Omit<OriginalDataTableColumn<T>, "columns"> & {
+    columns: ExtendedDataTableColumnProps<T>[];
+};
+declare function useDataTableColumnsExtend<T = Record<string, unknown>>({ key, columns, getInitialValueInEffect, headerRef, scrollViewportRef, onFixedLayoutChange, }: TUseDataTableColumnsExtendProps<T>): {
+    effectiveColumns: ExtendedDataTableColumnProps<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;
+};
+
+declare function useDataTableQueryParams(props?: ExtendedDataTableProps): {
+    page: number;
+    setPage: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    pageSize: number;
+    setPageSize: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    sorts: {
+        accessor: string;
+        direction: "asc" | "desc";
+    }[];
+    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>;
+    search: {
+        accessors: string[];
+        value: string;
+    };
+    setSearch: (value: {
+        accessors: string[];
+        value: string;
+    } | ((old: {
+        accessors: string[];
+        value: string;
+    }) => {
+        accessors: string[];
+        value: string;
+    } | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+    filters: {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
+        accessor: string;
+        value: string | string[];
+    }[];
+    setFilters: (value: {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
+        accessor: string;
+        value: string | string[];
+    }[] | ((old: {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
+        accessor: string;
+        value: string | string[];
+    }[]) => {
+        variant: "number" | "text" | "number_range" | "date" | "date_range" | "single_select" | "multi_select";
+        accessor: string;
+        value: string | string[];
+    }[] | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
+};
+
+declare const mergeQueryKey: (queryKey: string, prefixQueryKey?: string) => string;
+declare const cleanSearch: (search: TSearchCondition) => TSearchCondition;
+declare const extractOriginalQueryParams: (searchParams: Record<string, unknown>, prefixQueryKey: string) => {
+    page: number;
+    pageSize: number;
+    sorts: TSortCondition[];
+    search: TSearchCondition;
+    filters: TFilterCondition[];
+};
+
+export { DataTableColumnsToggle, DataTableFilter, DataTableSearch, DataTableSortList, EFilterVariant, ESortDirection, type ExtendedDataTableColumnProps, ExtendedDataTableProps, TFilterCondition, TSearchCondition, TSortCondition, cleanSearch, extractOriginalQueryParams, type i18nDataTableFilterOptions, type i18nDataTableSearchOptions, type i18nDataTableSortOptions, type i18nDataTableViewOptions, mergeQueryKey, useDataTableColumnsExtend, useDataTableQueryParams };

package/dist/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+import {Popover,Button,Stack,Checkbox,Group,TextInput,CloseButton,Badge,Grid,Select,ActionIcon,Space,Indicator,RangeSlider,NumberInput}from'@mantine/core';import {IconColumns,IconSort09,IconTrash,IconPlus,IconRefresh,IconX,IconSearch}from'@tabler/icons-react';import {useDataTableColumns}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import me,{z}from'zod';import {jsxs,jsx}from'react/jsx-runtime';import {DatePicker}from'@mantine/dates';import G from'dayjs';import Ut,{useState,useRef,useEffect}from'react';import {useDebouncedCallback}from'@mantine/hooks';function _({key:s,columns:r,getInitialValueInEffect:u=true,headerRef:n,scrollViewportRef:c,onFixedLayoutChange:m}){let o=useDataTableColumns({key:s,columns:r,getInitialValueInEffect:u,headerRef:n,scrollViewportRef:c,onFixedLayoutChange:m});return {...o,effectiveColumns:o.effectiveColumns}}var k={ASC:"asc",DESC:"desc"},y={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var L=z.object({accessor:z.string(),direction:z.enum(k)}),K=z.object({accessors:z.array(z.string()),value:z.string()}),X=z.object({variant:z.enum(y),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});var x=(s,r)=>r?`${r}_${s}`:s,eo=s=>s.accessors.length<=0||s.value.length<=0?{accessors:[],value:""}:s,to=(s,r)=>({page:s[x("page",r)],pageSize:s[x("pageSize",r)],sorts:s[x("sorts",r)],search:s[x("search",r)],filters:s[x("filters",r)]});function f(s={}){let{prefixQueryKey:r,defaultSorts:u}=s,[n,c]=useQueryState(x("page",r),parseAsInteger.withDefault(1)),[m,o]=useQueryState(x("pageSize",r),parseAsInteger.withDefault(10)),[t,p]=useQueryState(x("sorts",r),parseAsJson(me.array(L)).withDefault(u??[])),[g,b]=useQueryState(x("search",r),parseAsJson(K).withDefault({accessors:[],value:""})),[d,T]=useQueryState(x("filters",r),parseAsJson(me.array(X)).withDefault([]));return {page:n,setPage:c,pageSize:m,setPageSize:o,sorts:t,setSorts:p,search:g,setSearch:b,filters:d,setFilters:T}}var Ge={columnsToggle:"Columns Toggle"};function ze({columnStoreKey:s,columns:r,i18n:u=Ge}){let{effectiveColumns:n,columnsToggle:c,setColumnsToggle:m}=_({key:s,columns:r}),o=t=>{m(c.map(p=>p.accessor===t.accessor?{...p,toggled:!p.toggled}:p));};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"target",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconColumns,{}),variant:"default",children:u.columnsToggle})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:c.filter(t=>t.toggleable).map(t=>jsx(Checkbox,{checked:t.toggled,label:n.find(p=>p.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>o(t),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor))})})]})}function ge({prefixQueryKey:s,column:r}){let u=r.accessor,n=r.extend?.filterVariant,{filters:c,setFilters:m}=f({prefixQueryKey:s}),o=c.find(T=>T.accessor===u),t=o?.value?1:0,[p,g]=useState(o?G(Number.parseInt(o.value,10)).toISOString():null),b=T=>{if(g(T),T){let i=G(T).valueOf().toString();m(o?c.map(l=>l.accessor===u?{...l,value:i}:l):[...c,{variant:n,accessor:u,value:i}]);}},d=()=>{g(null),m(c.filter(T=>T.accessor!==u));};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:d,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{onChange:b,value:p})})]})}function fe({prefixQueryKey:s,column:r}){let u=r.accessor,n=r.extend?.filterVariant,{filters:c,setFilters:m}=f({prefixQueryKey:s}),o=c.find(T=>T.accessor===u),t=o?.value.length??0,[p,g]=useState(o?.value[0]&&o?.value[1]?[G(Number.parseInt(o.value[0],10)).toISOString(),G(Number.parseInt(o.value[1],10)).toISOString()]:[null,null]),b=([T,i])=>{if(g([T,i]),T&&i){let[l,e]=[G(T).valueOf().toString(),G(i).valueOf().toString()];m(o?c.map(a=>a.accessor===u?{...a,value:[l,e]}:a):[...c,{variant:n,accessor:u,value:[l,e]}]);}},d=()=>{g([null,null]),m(c.filter(T=>T.accessor!==u));};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:d,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,onChange:b,type:"range",value:p})})]})}function Se({prefixQueryKey:s,column:r,facet:u}){let n=r.accessor,c=r.extend?.filterVariant,m=u.data,{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(i=>i.accessor===n),g=p?.value.length??0,b=i=>{let l=p?.value??[],e=l.includes(i)?l.filter(a=>a!==i):[...l,i];if(e.length===0)t(o.filter(a=>a.accessor!==n));else {let a=o.some(h=>h.accessor===n);t(a?o.map(h=>h.accessor===n?{...h,value:e}:h):[...o,{variant:c,accessor:n,value:e}]);}},d=i=>o.some(l=>l.accessor===n&&l.value.includes(i)),T=()=>{t(o.filter(i=>i.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:T,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(i=>jsx(Checkbox,{checked:d(i.value),label:i.label,labelPosition:"left",onChange:()=>b(i.value),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${n}-${i.value}`))})})]})}function ye({prefixQueryKey:s,column:r,numberOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{debounceTimeout:m=300}=u??{debounceTimeout:300},{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(e=>e.accessor===n),g=p?.value.length??0,[b,d]=useState(p?Number.parseInt(p.value,10):void 0),T=useDebouncedCallback(e=>{t(p?o.map(a=>a.accessor===n?{...a,value:e.toString()}:a):[...o,{variant:c,accessor:n,value:e.toString()}]);},m),i=e=>{let a=e;typeof e=="string"&&(a=Number.parseInt(e,10)),d(a),T(a);},l=()=>{d(void 0),t(o.filter(e=>e.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(NumberInput,{onChange:e=>i(e),value:b})})]})}function ve({prefixQueryKey:s,column:r,numberRangeOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{min:m,max:o,step:t=1,minRange:p=1,debounceTimeout:g=300}=u,{filters:b,setFilters:d}=f({prefixQueryKey:s}),T=b.find(C=>C.accessor===n),i=T?.value.length??0,[l,e]=useState(T?.value[0]&&T?.value[1]?[Number.parseInt(T.value[0],10),Number.parseInt(T.value[1],10)]:[m,o]),a=useDebouncedCallback(C=>{let[V,ue]=[C[0].toString(),C[1].toString()];d(T?b.map(M=>M.accessor===n?{...M,value:[V,ue]}:M):[...b,{variant:c,accessor:n,value:[V,ue]}]);},g),h=([C,V])=>{e([C,V]),C&&V&&a([C,V]);},Ie=()=>{e([m,o]),d(b.filter(C=>C.accessor!==n));};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:Ie,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(RangeSlider,{max:o,min:m,minRange:p,onChange:h,step:t,value:l})})]})}function Fe({prefixQueryKey:s,column:r,facet:u}){let n=r.accessor,c=r.extend?.filterVariant,m=u.data,{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(i=>i.accessor===n),g=p?.value.length??0,b=i=>{t(p?o.map(l=>l.accessor===n?{...l,value:i}:l):[...o,{variant:c,accessor:n,value:i}]);},d=i=>p?.value===i,T=()=>{t(o.filter(i=>i.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:T,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(i=>jsx(Checkbox,{checked:d(i.value),label:i.label,labelPosition:"left",onChange:()=>b(i.value),radius:"xl",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${n}-${i.value}`))})})]})}function Pe({prefixQueryKey:s,column:r,textOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{debounceTimeout:m=300}=u??{debounceTimeout:300},{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(e=>e.accessor===n),g=p?.value.length??0,[b,d]=useState(p?p.value:""),T=useDebouncedCallback(e=>{t(p?e===""?o.filter(a=>a.accessor!==n):o.map(a=>a.accessor===n?{...a,value:e}:a):[...o,{variant:c,accessor:n,value:e}]);},m),i=e=>{d(e),T(e);},l=()=>{d(""),t(o.filter(e=>e.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(TextInput,{onChange:e=>i(e.target.value),value:b})})]})}var St={resetFilter:"Reset Filter"};function ht({prefixQueryKey:s,columns:r,facets:u,numberRangeOptions:n,textOptions:c,numberOptions:m,i18n:o=St}){let{filters:t,setFilters:p}=f({prefixQueryKey:s}),g=()=>{p([]);},b=r.filter(e=>e.extend?.filterable),d=e=>u?.find(a=>a.accessor===e),T=e=>n?.find(a=>a.accessor===e),i=e=>c?.find(a=>a.accessor===e),l=e=>m?.find(a=>a.accessor===e);return jsxs(Group,{gap:"xs",children:[b.map(e=>{switch(e.extend?.filterVariant){case y.TEXT:{let a=i(e.accessor);return jsx(Pe,{column:e,prefixQueryKey:s,textOptions:a},e.accessor)}case y.NUMBER:{let a=l(e.accessor);return jsx(ye,{column:e,numberOptions:a,prefixQueryKey:s},e.accessor)}case y.SINGLE_SELECT:{let a=d(e.accessor);return a&&jsx(Fe,{column:e,facet:a,prefixQueryKey:s},e.accessor)}case y.MULTI_SELECT:{let a=d(e.accessor);return a&&jsx(Se,{column:e,facet:a,prefixQueryKey:s},e.accessor)}case y.DATE:return jsx(ge,{column:e,prefixQueryKey:s},e.accessor);case y.DATE_RANGE:return jsx(fe,{column:e,prefixQueryKey:s},e.accessor);case y.NUMBER_RANGE:{let a=T(e.accessor);return a&&jsx(ve,{column:e,numberRangeOptions:a,prefixQueryKey:s},e.accessor)}default:return null}}),t.length>0&&jsx(Button,{onClick:g,variant:"default",children:o.resetFilter})]})}function Vt({prefixQueryKey:s,columns:r}){let{search:u,setSearch:n}=f({prefixQueryKey:s}),c=u.accessors.length,m=r.filter(t=>t.extend?.searchable),o=t=>{u.accessors.includes(t)?n({...u,accessors:u.accessors.filter(p=>p!==t)}):n({...u,accessors:[...u.accessors,t]});};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:c<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:c}),children:jsx(ActionIcon,{size:"lg",variant:"default",children:jsx(IconSearch,{size:16})})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(t=>jsx(Checkbox,{checked:u.accessors.includes(t.accessor.toString()),label:t.title?.toString()??"",labelPosition:"left",onChange:()=>o(t.accessor.toString()),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor.toString()))})})]})}var Bt={search:"Search"};function At({prefixQueryKey:s,columns:r,i18n:u=Bt,debounceTimeout:n=300}){let[c,m]=useState(""),o=useRef("");o.current=c,useEffect(()=>{},[]);let{search:t,setSearch:p}=f({prefixQueryKey:s});useEffect(()=>{o.current!==t.value&&m(t.value);},[t.value]);let g=useDebouncedCallback(d=>p({...t,value:d}),n),b=d=>{m(d),g(d);};return jsxs(Group,{gap:"xs",children:[jsx(Vt,{columns:r,prefixQueryKey:s}),jsx(TextInput,{onChange:d=>b(d.target.value),placeholder:u.search,rightSection:c.length>0&&jsx(CloseButton,{onClick:()=>b(""),size:"sm",variant:"transparent"}),value:c,w:"200px"})]})}var $t={sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"};function Wt({prefixQueryKey:s,columns:r,i18n:u=$t,defaultSorts:n=[]}){let{sorts:c,setSorts:m}=f({prefixQueryKey:s,defaultSorts:n}),o=r.filter(l=>l.extend?.sortable),t=o.filter(l=>!c.some(e=>e.accessor===l.accessor)),p=c.length,g=()=>{if(t.length>0&&t[0]){let l={accessor:t[0].accessor,direction:k.ASC};m([...c,l]);}},b=()=>{m(n);},d=l=>{m(c.filter(e=>e.accessor!==l));},T=(l,e)=>{if(e===null)return;let a=c.filter(h=>h.accessor!==l&&h.accessor!==e);m([...a,{accessor:e,direction:c.find(h=>h.accessor===l)?.direction||k.ASC}]);},i=(l,e)=>{e!==null&&m(c.map(a=>a.accessor===l?{...a,direction:e}:a));};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"450",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconSort09,{}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:p}),variant:"default",children:u.sort})}),jsxs(Popover.Dropdown,{children:[jsx(Grid,{children:c.map(l=>jsxs(Ut.Fragment,{children:[jsx(Grid.Col,{span:6,children:jsx(Select,{comboboxProps:{withinPortal:false},data:o.map(e=>({label:e.title?.toString()??"",value:e.accessor})),onChange:e=>T(l.accessor,e),value:l.accessor})}),jsx(Grid.Col,{span:4,children:jsx(Select,{comboboxProps:{withinPortal:false},data:Object.values(k).map(e=>({label:u[e]??"",value:e})),onChange:e=>i(l.accessor,e),value:l.direction})}),jsx(Grid.Col,{span:1,style:{display:"flex",justifyContent:"center",alignItems:"center"},children:jsx(ActionIcon,{onClick:()=>d(l.accessor),size:"lg",variant:"default",children:jsx(IconTrash,{size:16})})})]},l.accessor))}),jsx(Space,{h:"md"}),jsxs(Group,{children:[jsx(Button,{color:"gray",disabled:t.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:g,size:"xs",variant:"filled",children:u.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:b,size:"xs",variant:"default",children:u.resetSort})]})]})]})}export{ze as DataTableColumnsToggle,ht as DataTableFilter,At as DataTableSearch,Wt as DataTableSortList,y as EFilterVariant,k as ESortDirection,eo as cleanSearch,to as extractOriginalQueryParams,X as filterSchema,x as mergeQueryKey,K as searchSchema,L as sortSchema,_ as useDataTableColumnsExtend,f as useDataTableQueryParams};

package/dist/server.d.ts

@@ -0,0 +1,51 @@
+import * as nuqs_server from 'nuqs/server';
+import { E as ExtendedDataTableProps } from './data-table-extend.type-Dh8nSBAW.js';
+import 'zod';
+
+declare const createDataTableLoader: (props?: ExtendedDataTableProps) => nuqs_server.LoaderFunction<{
+    [x: string]: (Omit<nuqs_server.SingleParserBuilder<number>, "parseServerSide"> & {
+        readonly defaultValue: number;
+        parseServerSide(value: string | string[] | undefined): number;
+    }) | (Omit<nuqs_server.SingleParserBuilder<{
+        accessor: string;
+        direction: "asc" | "desc";
+    }[]>, "parseServerSide"> & {
+        readonly defaultValue: {
+            accessor: string;
+            direction: "asc" | "desc";
+        }[];
+        parseServerSide(value: string | string[] | undefined): {
+            accessor: string;
+            direction: "asc" | "desc";
+        }[];
+    }) | (Omit<nuqs_server.SingleParserBuilder<{
+        accessors: string[];
+        value: string;
+    }>, "parseServerSide"> & {
+        readonly defaultValue: {
+            accessors: string[];
+            value: string;
+        };
+        parseServerSide(value: string | string[] | undefined): {
+            accessors: string[];
+            value: string;
+        };
+    }) | (Omit<nuqs_server.SingleParserBuilder<{
+        variant: "number" | "date" | "text" | "number_range" | "date_range" | "single_select" | "multi_select";
+        accessor: string;
+        value: string | string[];
+    }[]>, "parseServerSide"> & {
+        readonly defaultValue: {
+            variant: "number" | "date" | "text" | "number_range" | "date_range" | "single_select" | "multi_select";
+            accessor: string;
+            value: string | string[];
+        }[];
+        parseServerSide(value: string | string[] | undefined): {
+            variant: "number" | "date" | "text" | "number_range" | "date_range" | "single_select" | "multi_select";
+            accessor: string;
+            value: string | string[];
+        }[];
+    });
+}>;
+
+export { createDataTableLoader };

package/dist/server.mjs

@@ -0,0 +1 @@
+import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z}from'zod';var i={ASC:"asc",DESC:"desc"},a={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var s=z.object({accessor:z.string(),direction:z.enum(i)}),c=z.object({accessors:z.array(z.string()),value:z.string()}),p=z.object({variant:z.enum(a),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});var r=(o,e)=>e?`${e}_${o}`:o;var b=(o={})=>{let{prefixQueryKey:e,defaultSorts:S}=o,f={[r("page",e)]:parseAsInteger.withDefault(1),[r("pageSize",e)]:parseAsInteger.withDefault(10),[r("sorts",e)]:parseAsJson(z.array(s)).withDefault(S??[]),[r("search",e)]:parseAsJson(c).withDefault({accessors:[],value:""}),[r("filters",e)]:parseAsJson(z.array(p)).withDefault([])};return createLoader(f)};export{b as createDataTableLoader};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "mantine-datatable-extended",
+  "type": "module",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "devDependencies": {
+    "@repo/config": "workspace:*",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@mantine/core": ">=8.3",
+    "@mantine/dates": ">=8.3",
+    "@mantine/hooks": ">=8.3",
+    "@tabler/icons-react": ">=3.35",
+    "clsx": ">=2",
+    "dayjs": ">=1.11",
+    "mantine-datatable": ">=8.3",
+    "nuqs": ">=2.8",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "zod": ">=4.1"
+  },
+  "sideEffects": false
+}