Mantine DataTable

'use client';

import { DataTable } from 'mantine-datatable';
import { TextInput, MultiSelect, Checkbox } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';

export function SearchingAndFilteringExample() {
  const [records, setRecords] = useState(initialRecords);
  const [query, setQuery] = useState('');
  const [selectedDepartments, setSelectedDepartments] = useState<string[]>([]);
  const [seniors, setSeniors] = useState(false);
  const [debouncedQuery] = useDebouncedValue(query, 200);

  // Filter the records based on state changes
  useEffect(() => {
    setRecords(
      initialRecords.filter(({ firstName, lastName, department, birthDate }) => {
        if (debouncedQuery !== '' && !`${firstName} ${lastName}`.toLowerCase().includes(debouncedQuery.trim().toLowerCase()))
          return false;
        if (selectedDepartments.length && !selectedDepartments.some((d) => d === department.name)) 
          return false;
        if (seniors && dayjs().diff(birthDate, 'y') < 70) 
          return false;
        return true;
      })
    );
  }, [debouncedQuery, selectedDepartments, seniors]);

  return (
    <DataTable
      records={records}
      columns={[
        {
          accessor: 'name',
          render: ({ firstName, lastName }) => `${firstName} ${lastName}`,
          filter: (
            <TextInput
              label="Employees"
              value={query}
              onChange={(e) => setQuery(e.currentTarget.value)}
            />
          ),
          filtering: query !== '',
        },
        {
          accessor: 'department.name',
          filter: (
            <MultiSelect
              label="Departments"
              data={['Engineering', 'Sales', 'HR']}
              value={selectedDepartments}
              onChange={setSelectedDepartments}
            />
          ),
          filtering: selectedDepartments.length > 0,
        },
        {
          accessor: 'age',
          filter: () => (
            <Checkbox
              label="Seniors"
              checked={seniors}
              onChange={() => setSeniors((current) => !current)}
            />
          ),
        },
      ]}
    />
  );
}

'use client';

import { DataTable, type DataTableColumn, type DataTableProps, type DataTableSortStatus } from 'mantine-datatable';
import { useQuery } from '@tanstack/react-query';
import { useState, useCallback } from 'react';
import { ActionIcon, Group, TextInput, Button } from '@mantine/core';
import { openModal, closeAllModals } from '@mantine/modals';

const PAGE_SIZE = 100;

export function ComplexUsageExample() {
  const [page, setPage] = useState(1);
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Employee>>({
    columnAccessor: 'name',
    direction: 'asc',
  });
  const [selectedRecords, setSelectedRecords] = useState<Employee[]>([]);

  // Asynchronous data fetching
  const { data, isFetching } = useQuery({
    queryKey: ['employees', sortStatus.columnAccessor, sortStatus.direction, page],
    queryFn: () => getEmployeesAsync({
      recordsPerPage: PAGE_SIZE,
      page,
      sortStatus,
      delay: { min: 300, max: 500 }
    }),
  });

  // Custom column definitions
  const columns: DataTableProps<Employee>['columns'] = [
    {
      accessor: 'name',
      sortable: true,
      render: ({ firstName, lastName }) => `${firstName} ${lastName}`,
    },
    {
      accessor: 'department.company.name',
      title: 'Company',
      sortable: true,
      visibleMediaQuery: '(min-width: 48em)', // Example breakpoint
    },
    {
      accessor: 'actions',
      title: 'Actions',
      width: '0%',
      render: (record) => (
        <Group gap={4} justify="right" wrap="nowrap">
          <ActionIcon
            onClick={(e) => {
              e.stopPropagation(); // Prevent triggering row click
              openModal({
                title: `Message ${record.firstName}`,
                children: <TextInput placeholder="Your message..." />,
              });
            }}
          >
            <IconMessage size={16} />
          </ActionIcon>
        </Group>
      ),
    },
  ];

  // Row expansion configuration
  const rowExpansion: DataTableProps<Employee>['rowExpansion'] = {
    allowMultiple: true,
    content: ({ record }) => (
      <div style={{ padding: '10px' }}>
        Detailed info for {record.firstName} {record.lastName}
      </div>
    ),
  };

  return (
    <DataTable
      columns={columns}
      records={data?.employees}
      totalRecords={data?.total}
      fetching={isFetching}
      page={page}
      onPageChange={setPage}
      recordsPerPage={PAGE_SIZE}
      sortStatus={sortStatus}
      onSortStatusChange={(status) => { setPage(1); setSortStatus(status); }}
      selectedRecords={selectedRecords}
      onSelectedRecordsChange={setSelectedRecords}
      rowExpansion={rowExpansion}
      highlightOnHover
      withTableBorder
      striped
    />
  );
}

import sortBy from 'lodash/sortBy';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import { companies, type Company } from '~/data';

export default function SortingExample() {
  // 1. Manage sort status state
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
    columnAccessor: 'name',
    direction: 'asc',
  });

  const [records, setRecords] = useState(sortBy(companies, 'name'));

  // 2. Handle data sorting logic based on sortStatus
  useEffect(() => {
    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
  }, [sortStatus]);

  return (
    <DataTable
      withBorder
      withColumnBorders
      records={records}
      columns={[
        { accessor: 'name', width: '40%', sortable: true }, // 3. Mark column as sortable
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160, sortable: true },
        { accessor: 'state', sortable: true },
      ]}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
    />
  );
}

import { DataTable } from 'mantine-datatable';

function ParentTable() {
  const [expandedRecordIds, setExpandedRecordIds] = useState<string[]>([]);

  return (
    <DataTable
      records={companies}
      columns={[
        { accessor: 'name', title: 'Company' },
        { accessor: 'employees', title: 'Employees' },
      ]}
      rowExpansion={{
        allowMultiple: true,
        expanded: { recordIds: expandedRecordIds, onRecordIdsChange: setExpandedRecordIds },
        // The content function is lazily executed upon expansion
        content: ({ record }) => <DepartmentsTable companyId={record.id} />,
      }}
    />
  );
}

function DepartmentsTable({ companyId }: { companyId: string }) {
  // Fetch data asynchronously based on the parent ID
  const { records, loading } = useDepartmentsAsync({ companyId });

  return (
    <DataTable
      noHeader
      fetching={loading}
      records={records}
      columns={[
        { accessor: 'name', title: 'Department' },
      ]}
      rowExpansion={{
        allowMultiple: true,
        content: ({ record }) => <EmployeesTable departmentId={record.id} />,
      }}
    />
  );
}

import { DataTable } from 'mantine-datatable';
import { useState } from 'react';

const PAGE_SIZES = [10, 15, 20];

export default function PageSizeExample() {
  const [pageSize, setPageSize] = useState(PAGE_SIZES[1]);
  const [page, setPage] = useState(1);

  return (
    <DataTable
      records={records}
      columns={columns}
      totalRecords={employees.length}
      recordsPerPage={pageSize}
      page={page}
      onPageChange={setPage}
      recordsPerPageOptions={PAGE_SIZES}
      onRecordsPerPageChange={setPageSize}
      recordsPerPageLabel="Records per page"
    />
  );
}

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Check for linting errors
pnpm lint

# Format code with Biome
pnpm format

# Build the project
pnpm build