mantine-entity/dist/components/DataTable/DataTable.js

A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { MantineReactTable, useMantineReactTable, } from "mantine-react-table";
import { useCustomQuery } from "../../hooks/useCustomQuery";
//mock data - strongly typed if you are using TypeScript (optional, but recommended)
const data = [
    {
        name: "John",
        age: 30,
    },
    {
        name: "Sara",
        age: 25,
    },
];
export function DataTable({ queryKey, queryFn, columns, }) {
    const { data, isLoading, error } = useCustomQuery(queryKey, queryFn);
    const memoizedColumns = useMemo(() => columns, [columns]);
    if (error) {
        return _jsx("div", { children: "Error loading data" });
    }
    //pass table options to useMantineReactTable
    const table = useMantineReactTable({
        columns: memoizedColumns,
        data: data ?? [], //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
        enableRowSelection: true, //enable some features
        enableColumnOrdering: true, //enable a feature for all columns
        enableGlobalFilter: false, //turn off a feature
    });
    //note: you can also pass table options as props directly to <MantineReactTable /> instead of using useMantineReactTable
    //but the useMantineReactTable hook will be the most recommended way to define table options
    return _jsx(MantineReactTable, { table: table });
}