Skip to main content

Mantine UI & mantine-datatable

Overview​

The application uses Mantine UI as the component library for consistent, accessible UI primitives. For data grids/tables, we use mantine-datatable when we need lightweight, accessible tabular components.

Installation​

pnpm add @mantine/core @mantine/hooks @mantine/form @mantine/notifications
pnpm add mantine-datatable

Provider setup (in app/layout.tsx)​

'use client';
import { MantineProvider } from '@mantine/core';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <MantineProvider withGlobalStyles withNormalizeCSS>
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

Theming​

  • Use Mantine theme tokens and MantineProvider to centralize colors and typography
  • Prefer design tokens from the theme object instead of hard-coded values

Example: datatable usage​

import { DataTable } from 'mantine-datatable';

export function EmployeesTable({ data }) {
  return (
    <DataTable
      records={data}
      columns={[{ accessor: 'name' }, { accessor: 'email' }, { accessor: 'department' }]}
      totalRecords={data.length}
      // Add pagination, sorting handlers integrated with TanStack Query
    />
  );
}

Accessibility​

  • Ensure table headers are semantic
  • Support keyboard navigation and focus states
  • Provide visible focus styles via Mantine theme

Performance​

  • Virtualize long lists where needed
  • Offload heavy work to server or worker threads
  • Use memoization (useMemo, React.memo) for row renderers

Integration tips​

  • Combine mantine-datatable with server-side pagination from the API
  • Provide stable key props for rows
  • Use TanStack Query to cache pages and prefetch next pages

Component patterns​

  • Small presentational components in src/components/ui/
  • Composite components that combine data fetching live in src/components/containers/
  • Keep styles co-located when using CSS modules or Tailwind utility classes

Resources​