Components

The library provides independent components that you can arrange in any layout you want. All these components must be placed inside DteProvider.

DteExtended

The main component for displaying data tables. This is a replacement for the DataTable component from the original mantine-datatable library.

Props

DteExtended accepts all props from DataTable in mantine-datatable, except:

columns - automatically retrieved from context
storeColumnsKey - automatically retrieved from context
groups - not supported
Pagination and Sort props - use separate components instead

Example


import {
  DteExtended,
  DteProvider,
} from "mantine-datatable-extended";
import { useDataTableColumns } from "mantine-datatable";
 
function MyTable() {
  const columns = [
    { accessor: "name", title: "Name" },
    { accessor: "email", title: "Email" },
  ];
 
  const originalUseDataTableColumnsResult = useDataTableColumns({
    key: "my-table",
    columns,
  });
 
  return (
    <DteProvider
      columns={columns}
      originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
      storeColumnsKey="my-table"
    >
      <DteExtended records={data} />
    </DteProvider>
  );
}

DteSearch

Component for searching across columns. Supports selecting multiple columns to search simultaneously.

Props

No props. i18n is configured via DteProvider.

Usage

To use this component, mark columns as searchable in extend:


const columns = [
  {
    accessor: "name",
    title: "Name",
    extend: {
      searchable: true, // Mark this column as searchable
    },
  },
  {
    accessor: "email",
    title: "Email",
    extend: {
      searchable: true,
    },
  },
];

Example


import { DteSearch } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteSearch />
      {/* Other components */}
    </Group>
  );
}

DteFilter

Component for filtering data based on various conditions. Automatically displays filters based on the filterable and filterVariant configuration of each column.

Props

No props. i18n is configured via DteProvider.

Usage

Configure filters in column definition:


const columns = [
  {
    accessor: "status",
    title: "Status",
    extend: {
      filterable: true,
      filterVariant: "single_select",
      filterOptions: {
        data: [
          { label: "Active", value: "active" },
          { label: "Inactive", value: "inactive" },
        ],
      },
    },
  },
];

Example


import { DteFilter } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteFilter />
      {/* Other components */}
    </Group>
  );
}

See Filter Variants to learn about all available filter types.

DteSortList

Component for sorting by multiple columns at once. Supports adding/removing/changing sort order.

Props

No props. i18n is configured via DteProvider.

Usage

Mark columns as sortable:


const columns = [
  {
    accessor: "name",
    title: "Name",
    extend: {
      sortable: true, // This column can be sorted
    },
  },
];

Example


import { DteSortList } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteSortList />
      {/* Component will display popover with sort list */}
    </Group>
  );
}

DteColumnsToggle

Component to show/hide columns. Useful when you have many columns and want to let users customize the view.

Props

No props. i18n is configured via DteProvider.

Usage

Mark columns as toggleable:


const columns = [
  {
    accessor: "name",
    title: "Name",
    toggleable: true, // This column can be toggled
  },
];

Example


import { DteColumnsToggle } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteColumnsToggle />
      {/* Component displays popover with checkbox list */}
    </Group>
  );
}

Note: Column state will be saved to localStorage based on storeColumnsKey in DteProvider.

DtePagination

Pagination component that can be placed anywhere on the page (not fixed to footer like the original).

Props


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

i18n is configured via DteProvider.

Usage

For this component to work correctly, you need to set totalRecords through context:


import { useDteContext } from "mantine-datatable-extended";
 
function MyTable() {
  const { setTotalRecords } = useDteContext();
  
  // When data is loaded
  useEffect(() => {
    setTotalRecords(totalRecords);
  }, [totalRecords]);
  
  return <DteExtended records={records} />;
}

Example


import { DtePagination } from "mantine-datatable-extended";
 
function TableFooter() {
  return (
    <DtePagination 
      recordsPerPageOptions={[10, 25, 50, 100]}
    />
  );
}

Complete Layout

Example of how to arrange components:


function DataTablePage() {
  return (
    <DteProvider {...props}>
      {/* Header with controls */}
      <Group justify="space-between">
        <Group>
          <DteSearch />
          <DteFilter />
        </Group>
        <Group>
          <DteSortList />
          <DteColumnsToggle />
        </Group>
      </Group>
 
      <Space h="md" />
 
      {/* Table */}
      <DteExtended records={records} />
 
      <Space h="md" />
 
      {/* Footer with pagination */}
      <DtePagination />
    </DteProvider>
  );
}

Custom i18n

Pass i18n to DteProvider to customize text. Grouped by component - only override the keys you need:


<DteProvider
  {...props}
  i18n={{
    search: { search: "Search..." },
    filter: { resetFilter: "Reset Filters" },
    sort: { sort: "Sort", addSort: "Add Sort" },
    view: { columnsToggle: "Columns" },
    pagination: { rowsPerPage: "Rows per page", pageOfTotalPages: ["Page", "of"] },
  }}
>
  {/* components */}
</DteProvider>

Components

The library provides independent components that you can arrange in any layout you want. All these components must be placed inside DteProvider.

DteExtended

The main component for displaying data tables. This is a replacement for the DataTable component from the original mantine-datatable library.

Props

DteExtended accepts all props from DataTable in mantine-datatable, except:

columns - automatically retrieved from context
storeColumnsKey - automatically retrieved from context
groups - not supported
Pagination and Sort props - use separate components instead

Example


import {
  DteExtended,
  DteProvider,
} from "mantine-datatable-extended";
import { useDataTableColumns } from "mantine-datatable";
 
function MyTable() {
  const columns = [
    { accessor: "name", title: "Name" },
    { accessor: "email", title: "Email" },
  ];
 
  const originalUseDataTableColumnsResult = useDataTableColumns({
    key: "my-table",
    columns,
  });
 
  return (
    <DteProvider
      columns={columns}
      originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
      storeColumnsKey="my-table"
    >
      <DteExtended records={data} />
    </DteProvider>
  );
}

DteSearch

Component for searching across columns. Supports selecting multiple columns to search simultaneously.

Props

No props. i18n is configured via DteProvider.

Usage

To use this component, mark columns as searchable in extend:


const columns = [
  {
    accessor: "name",
    title: "Name",
    extend: {
      searchable: true, // Mark this column as searchable
    },
  },
  {
    accessor: "email",
    title: "Email",
    extend: {
      searchable: true,
    },
  },
];

Example


import { DteSearch } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteSearch />
      {/* Other components */}
    </Group>
  );
}

DteFilter

Component for filtering data based on various conditions. Automatically displays filters based on the filterable and filterVariant configuration of each column.

Props

No props. i18n is configured via DteProvider.

Usage

Configure filters in column definition:


const columns = [
  {
    accessor: "status",
    title: "Status",
    extend: {
      filterable: true,
      filterVariant: "single_select",
      filterOptions: {
        data: [
          { label: "Active", value: "active" },
          { label: "Inactive", value: "inactive" },
        ],
      },
    },
  },
];

Example


import { DteFilter } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteFilter />
      {/* Other components */}
    </Group>
  );
}

See Filter Variants to learn about all available filter types.

DteSortList

Component for sorting by multiple columns at once. Supports adding/removing/changing sort order.

Props

No props. i18n is configured via DteProvider.

Usage

Mark columns as sortable:


const columns = [
  {
    accessor: "name",
    title: "Name",
    extend: {
      sortable: true, // This column can be sorted
    },
  },
];

Example


import { DteSortList } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteSortList />
      {/* Component will display popover with sort list */}
    </Group>
  );
}

DteColumnsToggle

Component to show/hide columns. Useful when you have many columns and want to let users customize the view.

Props

No props. i18n is configured via DteProvider.

Usage

Mark columns as toggleable:


const columns = [
  {
    accessor: "name",
    title: "Name",
    toggleable: true, // This column can be toggled
  },
];

Example


import { DteColumnsToggle } from "mantine-datatable-extended";
 
function TableHeader() {
  return (
    <Group>
      <DteColumnsToggle />
      {/* Component displays popover with checkbox list */}
    </Group>
  );
}

Note: Column state will be saved to localStorage based on storeColumnsKey in DteProvider.

DtePagination

Pagination component that can be placed anywhere on the page (not fixed to footer like the original).

Props


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

i18n is configured via DteProvider.

Usage

For this component to work correctly, you need to set totalRecords through context:


import { useDteContext } from "mantine-datatable-extended";
 
function MyTable() {
  const { setTotalRecords } = useDteContext();
  
  // When data is loaded
  useEffect(() => {
    setTotalRecords(totalRecords);
  }, [totalRecords]);
  
  return <DteExtended records={records} />;
}

Example


import { DtePagination } from "mantine-datatable-extended";
 
function TableFooter() {
  return (
    <DtePagination 
      recordsPerPageOptions={[10, 25, 50, 100]}
    />
  );
}

Complete Layout

Example of how to arrange components:


function DataTablePage() {
  return (
    <DteProvider {...props}>
      {/* Header with controls */}
      <Group justify="space-between">
        <Group>
          <DteSearch />
          <DteFilter />
        </Group>
        <Group>
          <DteSortList />
          <DteColumnsToggle />
        </Group>
      </Group>
 
      <Space h="md" />
 
      {/* Table */}
      <DteExtended records={records} />
 
      <Space h="md" />
 
      {/* Footer with pagination */}
      <DtePagination />
    </DteProvider>
  );
}

Custom i18n

Pass i18n to DteProvider to customize text. Grouped by component - only override the keys you need:


<DteProvider
  {...props}
  i18n={{
    search: { search: "Search..." },
    filter: { resetFilter: "Reset Filters" },
    sort: { sort: "Sort", addSort: "Add Sort" },
    view: { columnsToggle: "Columns" },
    pagination: { rowsPerPage: "Rows per page", pageOfTotalPages: ["Page", "of"] },
  }}
>
  {/* components */}
</DteProvider>