npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mantine-react-table-custom

v1.3.5

Published

A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.

Downloads

190

Readme

Mantine React Table

View the Docs Site

A fork of Material React Table

V1 released July 18, 2023

About

Quickly Create React Data Tables with Mantine

Built with Mantine V5 and TanStack Table V8

Learn More

Quick Examples

View additional storybook examples

Features

All features can easily be enabled/disabled

Fully Fleshed out Docs are available for all features

  • [x] < 44kb gzipped - Bundlephobia
  • [x] Advanced TypeScript Generics Support (TypeScript Optional)
  • [x] Aggregation and Grouping (Sum, Average, Count, etc.)
  • [x] Click To Copy Cell Values
  • [x] Column Action Dropdown Menu
  • [x] Column Hiding
  • [x] Column Ordering via Drag'n'Drop
  • [x] Column Pinning (Freeze Columns)
  • [x] Column Resizing
  • [x] Customize Icons
  • [x] Customize Styling of internal Mantine Components
  • [x] Data Editing (4 different editing modes)
  • [x] Density Toggle
  • [x] Detail Panels (Expansion)
  • [x] Filtering (supports client-side and server-side)
  • [x] Filter Match Highlighting
  • [x] Full Screen Mode
  • [x] Global Filtering (Search across all columns, rank by best match)
  • [x] Header Groups & Footers
  • [x] Localization (i18n) support
  • [x] Manage your own state or let the table manage it internally for you
  • [x] Pagination (supports client-side and server-side)
  • [x] Row Actions (Your Custom Action Buttons)
  • [x] Row Numbers
  • [x] Row Ordering via Drag'n'Drop
  • [x] Row Selection (Checkboxes)
  • [x] SSR compatible
  • [x] Sorting (supports client-side and server-side)
  • [x] Theming (Respects your Mantine Theme)
  • [x] Toolbars (Add your own action buttons)
  • [x] Tree Data / Expanding Sub-rows
  • [x] Virtualization (@tanstack/react-virtual)

Getting Started

Installation

View the full Installation Docs

  1. Ensure that you have React 17 or later installed

  2. Install Peer Dependencies (Mantine V6 and Tabler Icons)

npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs
  1. Install mantine-react-table
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.

Usage

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

Contributors

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.