
Security News
NVD Quietly Sweeps 100K+ CVEs Into a “Deferred” Black Hole
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
mantine-react-table
Advanced tools
A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.
View the Docs Site
An official fork of Material React Table
V1 released July 18, 2023
View additional storybook examples
All features can easily be enabled/disabled
Fully Fleshed out Docs are available for all features
View the full Installation Docs
Ensure that you have React 17 or later installed
Install Peer Dependencies (Mantine V6 and Tabler Icons)
npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs
npm install mantine-react-table
@tanstack/react-table
,@tanstack/react-virtual
,@tanstack/match-sorter-utils
, are internal dependencies, so you do NOT need to install them yourself.
Read the full usage docs here
import { useMemo, useState, useEffect } from 'react';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
const data = [
{
name: 'John',
age: 30,
},
{
name: 'Sara',
age: 25,
},
]
export default function App() {
const columns = useMemo(
() => [
{
accessorKey: 'name', //simple recommended way to define a column
header: 'Name',
mantineTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
},
{
accessorFn: (row) => row.age, //alternate way
id: 'age', //id required if you use accessorFn instead of accessorKey
header: 'Age',
Header: () => <i>Age</i>, //optional custom header render
},
],
[],
);
//optionally, you can manage any/all of the table state yourself
const [rowSelection, setRowSelection] = useState({});
useEffect(() => {
//do something when the row selection changes
}, [rowSelection]);
const table = useMantineReactTable({
columns,
data,
enableColumnOrdering: true, //enable some features
enableRowSelection: true,
enablePagination: false, //disable a default feature
onRowSelectionChange: setRowSelection, //hoist row selection state to your state
state: { rowSelection },
});
return <MantineReactTable table={table} />;
}
Open in Code Sandbox
PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!
Read the Contributing Guide to learn how to run this project locally.
FAQs
A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.
The npm package mantine-react-table receives a total of 41,115 weekly downloads. As such, mantine-react-table popularity was classified as popular.
We found that mantine-react-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
Research
Security News
Lazarus-linked threat actors expand their npm malware campaign with new RAT loaders, hex obfuscation, and over 5,600 downloads across 11 packages.
Security News
Safari 18.4 adds support for Iterator Helpers and two other TC39 JavaScript features, bringing full cross-browser coverage to key parts of the ECMAScript spec.