gridex-mantine

Mantine v8 integration for Gridex -- use Mantine components for all grid UI elements.

Website | Documentation | GitHub

Installation

npm install gridex-mantine gridex @mantine/core @mantine/dates

Peer dependencies: react >= 18, react-dom >= 18, @mantine/core >= 8, gridex >= 0.5.0

@mantine/dates is optional -- only required if you use date/datetime/time editors.

Quick Start

import { MantineProvider } from "@mantine/core";
import { MantineGridex } from "gridex-mantine";
import { createColumns } from "gridex";
import "gridex/dist/index.css";
import "@mantine/core/styles.css";

type Person = { name: string; age: number; email: string };

const data: Person[] = [
  { name: "Alice", age: 32, email: "[email protected]" },
  { name: "Bob", age: 28, email: "[email protected]" },
];

const columns = createColumns<Person>((col) => [
  col.accessor("name", { header: "Name" }),
  col.accessor("age", { header: "Age", type: "number" }),
  col.accessor("email", { header: "Email" }),
]);

function App() {
  return (
    <MantineProvider>
      <MantineGridex data={data} columns={columns} />
    </MantineProvider>
  );
}

<MantineGridex> is a drop-in replacement for <Gridex>. It automatically:

• Maps all Gridex CSS variables to Mantine design tokens
• Replaces pagination, empty state, loading, toolbar, filters, and column visibility with Mantine components
• Injects Mantine-based cell editors for every column type (text, number, date, select, boolean, etc.)
• Detects light/dark mode from <MantineProvider>

Theme Customization

CSS variable overrides

Use createMantineTheme to build a style object with selective overrides:

import { createMantineTheme } from "gridex-mantine";
import { Gridex } from "gridex";

const myTheme = createMantineTheme({
  "--gridex-border-radius": "4px",
  "--gridex-font-size": "13px",
});

<Gridex style={myTheme} data={data} columns={columns} />;

Via the wrapper component

Pass themeOverrides to <MantineGridex> for inline customization:

<MantineGridex
  data={data}
  columns={columns}
  themeOverrides={{
    "--gridex-border-radius": "0",
    "--gridex-cell-padding-x": "var(--mantine-spacing-lg)",
  }}
/>

Mantine primaryColor flows through

The theme preset uses Mantine's own CSS variables (--mantine-primary-color-filled, --mantine-color-body, etc.), so changing your Mantine theme's primaryColor or fontFamily automatically updates the grid.

Dark Mode

<MantineGridex> reads the active color scheme from <MantineProvider> and passes the correct theme prop to Gridex. No manual theme="dark" is needed.

import { MantineProvider } from "@mantine/core";

// The grid automatically switches to dark mode
<MantineProvider defaultColorScheme="dark">
  <MantineGridex data={data} columns={columns} />
</MantineProvider>;

When the Mantine color scheme is "auto", the grid detects the system preference via prefers-color-scheme.

Selective Overrides

Override a single slot

Pass slots to <MantineGridex> to replace one slot while keeping all other Mantine defaults:

import { MantineGridex } from "gridex-mantine";

function CustomPagination(props) {
  return (
    <div>
      Page {props.pageIndex + 1} of {props.pageCount}
    </div>
  );
}

<MantineGridex
  data={data}
  columns={columns}
  pagination={{ pageSize: 10 }}
  slots={{ pagination: CustomPagination }}
/>;

Use a custom editor for one column

Columns that specify a type in their meta automatically get the corresponding Mantine editor. To override a specific column, set meta.editor explicitly:

import { createColumns } from "gridex";

function MyCustomEditor({ value, onSave, onCancel }) {
  // your custom editor
}

const columns = createColumns<Person>((col) => [
  col.accessor("name", {
    header: "Name",
    meta: { editor: MyCustomEditor },
  }),
  col.accessor("age", {
    header: "Age",
    type: "number", // uses MantineNumberEditor automatically
  }),
]);

Manual Integration

If you prefer to use <Gridex> directly instead of the <MantineGridex> wrapper, import the slot and editor maps:

import { Gridex, createColumns } from "gridex";
import {
  mantineSlots,
  mantineEditorMap,
  useMantineGridexTheme,
} from "gridex-mantine";

function MyGrid() {
  const { theme, style } = useMantineGridexTheme();

  return (
    <div style={style}>
      <Gridex
        data={data}
        columns={columns}
        slots={mantineSlots}
        theme={theme}
      />
    </div>
  );
}

API Reference

Components

| Export | Description | | ----------------------------- | ---------------------------------------------------- | | MantineGridex | Drop-in Gridex wrapper with full Mantine integration | | MantinePagination | Mantine-styled pagination bar | | MantineEmptyState | Mantine-styled empty state | | MantineLoadingState | Mantine-styled skeleton loading | | MantineToolbar | Mantine-styled toolbar | | MantineColumnFilter | Mantine-styled column filter inputs | | MantineColumnVisibility | Mantine-styled column visibility toggle | | MantineAdvancedFilterDialog | Mantine-styled advanced filter dialog | | MantineSelectionCheckbox | Mantine checkbox for row selection | | MantineSortIndicator | Mantine-styled sort direction indicator |

Editors

| Export | Column Type | | --------------------------- | -------------- | | MantineTextEditor | text | | MantineNumberEditor | number | | MantineDateEditor | date | | MantineDateTimeEditor | datetime | | MantineTimeEditor | time | | MantineSelectEditor | select | | MantineBooleanEditor | boolean | | MantinePasswordEditor | password | | MantineLargeTextEditor | largeText | | MantinePhoneEditor | phone | | MantinePercentageEditor | percentage | | MantineDurationEditor | duration | | MantineMaskedEditor | masked | | MantineAutocompleteEditor | autocomplete | | MantineRichSelectEditor | richSelect |

Theme Utilities

| Export | Description | | ----------------------------------- | ------------------------------------------------------- | | createMantineTheme(overrides?) | Returns a CSS variable style object with Mantine tokens | | useMantineGridexTheme(overrides?) | Hook that returns { theme, style, colorScheme } | | mantineThemePreset | Raw Mantine-to-Gridex CSS variable mapping |

Convenience Objects

| Export | Description | | --------------------------- | ------------------------------------------------------------------ | | mantineSlots | All Mantine slot overrides for manual <Gridex slots={...}> usage | | mantineEditorMap | Type-to-editor mapping for manual column processing | | mantineStructuralSlots | Pagination, empty, loading, toolbar slots only | | mantineInteractiveSlots | Column filter, visibility, advanced filter slots only | | mantineCoreEditors | Core editor map (text, number, date, select, boolean) | | mantineSpecializedEditors | Specialized editor map (password, phone, duration, etc.) | | mantineAllEditors | All editors combined |

Types

| Export | Description | | --------------------------- | --------------------------------------------------- | | MantineGridexProps<TData> | Props for <MantineGridex> (extends GridexProps) | | GridexCSSVariables | Interface for all themeable CSS variable keys | | UseMantineThemeResult | Return type of useMantineGridexTheme |

License

MIT