API Reference

type TDteColumnProps<T = Record<string, unknown>> = 
  Omit<
    DataTableColumn<T>,
    | "sortable"
    | "sortKey"
    | "filter"
    | "filterPopoverProps"
    | "filterPopoverDisableClickOutside"
    | "filtering"
    | "ellipsis"
    | "noWrap"
  > & {
    extend?: TFilterableExtend;
  } & (
    | { ellipsis?: boolean; noWrap?: never }
    | { ellipsis?: never; noWrap?: boolean }
  );

type TFilterableExtend = {
  searchable?: boolean;
  sortable?: boolean;
  filterable?: boolean;
  filterVariant?: 
    | "text"
    | "number"
    | "date"
    | "date_range"
    | "number_range"
    | "single_select"
    | "multi_select";
  filterOptions?: 
    | TFilterNumberRangeOptions
    | TFilterSingleSelectOptions
    | TFilterMultiSelectOptions;
};

type TFilterNumberRangeOptions = {
  min: number;
  max: number;
  step?: number;
  minRange?: number;
};

type TFilterSingleSelectOptions = {
  data: {
    value: string;
    label: string;
    count?: number;
    icon?: React.ReactNode;
  }[];
};
 
type TFilterMultiSelectOptions = TFilterSingleSelectOptions; // Same type

type TUrlKeys = {
  page: string;
  pageSize: string;
  sorts: string;
  search: string;
  filters: string;
};

type TDefaultParams = {
  page?: number;
  pageSize?: number;
  sorts?: TSortCondition[];
  search?: TSearchCondition;
  filters?: TFilterCondition[];
};

type TSortCondition = {
  accessor: string;
  direction: "asc" | "desc";
};

type TSearchCondition = {
  accessors: string[];
  value: string;
};

type TFilterCondition = {
  variant: 
    | "text"
    | "number"
    | "date"
    | "date_range"
    | "number_range"
    | "single_select"
    | "multi_select";
  accessor: string;
  value: string | string[];
};

type TDteProviderProps<T = Record<string, unknown>> = {
  children: React.ReactNode;
  urlKeys?: TUrlKeys;
  defaultParams?: TDefaultParams;
  storeColumnsKey: string; // Required
  columns: TDteColumnProps<T>[]; // Required
  originalUseDataTableColumnsResult: ReturnType<
    typeof useDataTableColumns<T>
  >; // Required
  i18n?: TDteI18nInput; // Optional, merged with defaults
};

type TDtePaginationProps = {
  recordsPerPageOptions?: number[]; // Default: [10, 20, 30, 40, 50]
};

function useDteContext<T = Record<string, unknown>>(): 
  TDteContextProps<T>;

type TDteContextProps<T> = {
  urlKeys?: TUrlKeys;
  i18n: TDteI18n; // Merged i18n (always present)
  defaultParams?: TDefaultParams;
  storeColumnsKey: string;
  columns: TDteColumnProps<T>[];
  originalUseDataTableColumnsResult: ReturnType<
    typeof useDataTableColumns<T>
  >;
  paginationProps?: TPaginationProps;
  setTotalRecords?: (totalRecords: number) => void;
  setRecordsPerPageOptions?: (recordsPerPageOptions: number[]) => void;
};

function useDteQueryParams(): {
  page: number;
  setPage: (page: number) => void;
  pageSize: number;
  setPageSize: (pageSize: number) => void;
  sorts: TSortCondition[];
  setSorts: (sorts: TSortCondition[]) => void;
  search: TSearchCondition;
  setSearch: (search: TSearchCondition) => void;
  filters: TFilterCondition[];
  setFilters: (filters: TFilterCondition[]) => void;
  resetPage: () => void;
  resetPageSize: () => void;
  resetSorts: () => void;
  resetSearch: () => void;
  resetFilters: () => void;
  resetAll: () => void;
};

function createDteLoader(
  props?: Pick<TDteContextProps, "urlKeys" | "defaultParams">
): (searchParams: Promise<SearchParams>) => Promise<{
  page: number;
  pageSize: number;
  sorts: TSortCondition[];
  search: TSearchCondition;
  filters: TFilterCondition[];
}>;

import { createDteLoader } from "mantine-datatable-extended/server";
 
const loader = createDteLoader({
  defaultParams: {
    page: 1,
    pageSize: 10,
  },
  urlKeys: {
    page: "p",
    pageSize: "ps",
    sorts: "s",
    search: "q",
    filters: "f",
  },
});
 
// In server component
const params = await loader(searchParams);

enum ESortDirection {
  ASC = "asc",
  DESC = "desc",
}

enum EFilterVariant {
  TEXT = "text",
  NUMBER = "number",
  NUMBER_RANGE = "number_range",
  DATE = "date",
  DATE_RANGE = "date_range",
  SINGLE_SELECT = "single_select",
  MULTI_SELECT = "multi_select",
}

// ❌ Error: storeColumnsKey property is required
<DteProvider columns={columns} {...otherProps}>
  {/* Missing storeColumnsKey */}
</DteProvider>

// ❌ Error: columns property is required
<DteProvider storeColumnsKey="table" {...otherProps}>
  {/* Missing columns */}
</DteProvider>

// ❌ Error: useDteContext must be used within a DteProvider
function Component() {
  const context = useDteContext(); // Will throw
  return null;
}

import type {
  TDteColumnProps,
  TDteI18nInput,
  TDteProviderProps,
} from "mantine-datatable-extended";