Mantine React Table

A comprehensive React table component built with Mantine UI and TanStack Table, providing a powerful and customizable data table solution.

Features

• 🎨 Mantine UI Integration - Built on top of Mantine UI components
• 📊 TanStack Table - Powered by the most flexible table library
• 🔧 Highly Customizable - Extensive customization options
• 📱 Responsive - Mobile-friendly design
• ♿ Accessible - WCAG compliant components
• 🚀 Performance - Virtual scrolling and optimized rendering
• 🎯 TypeScript Support - Full TypeScript support (converted to JSX)

Installation

npm install @your-username/mantine-react-table
# or
yarn add @your-username/mantine-react-table
# or
pnpm add @your-username/mantine-react-table

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "@mantine/core": ">=7.0.0",
  "@mantine/hooks": ">=7.0.0",
  "@tanstack/react-table": ">=8.0.0"
}

Quick Start

import React from 'react';
import { MantineProvider } from '@mantine/core';
import { MantineReactTable } from '@your-username/mantine-react-table';

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', age: 30 },
  { id: 2, name: 'Jane Smith', email: '[email protected]', age: 25 },
  // ... more data
];

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'age', header: 'Age' },
];

function App() {
  return (
    <MantineProvider>
      <MantineReactTable
        columns={columns}
        data={data}
        enableColumnFiltering
        enableSorting
        enablePagination
      />
    </MantineProvider>
  );
}

export default App;

Available Components

Core Components

• MantineReactTable - Main table component
• MRT_Table - Base table component
• MRT_TableContainer - Table container wrapper
• MRT_TablePaper - Paper wrapper for table

Body Components

• MRT_TableBody - Table body component
• MRT_TableBodyCell - Individual cell component
• MRT_TableBodyRow - Table row component
• MRT_TableBodyEmptyRow - Empty state row
• MRT_TableDetailPanel - Expandable detail panel

Header Components

• MRT_TableHead - Table header component
• MRT_TableHeadCell - Header cell component
• MRT_TableHeadRow - Header row component

Footer Components

• MRT_TableFooter - Table footer component
• MRT_TableFooterCell - Footer cell component
• MRT_TableFooterRow - Footer row component

Toolbar Components

• MRT_TopToolbar - Top toolbar with actions
• MRT_BottomToolbar - Bottom toolbar with pagination
• MRT_TablePagination - Pagination component

Button Components

• MRT_CopyButton - Copy data button
• MRT_ExpandButton - Row expansion button
• MRT_ToggleFiltersButton - Filter toggle button
• MRT_ToggleFullScreenButton - Full screen toggle
• And many more...

Input Components

• MRT_FilterTextInput - Text filter input
• MRT_FilterCheckbox - Checkbox filter
• MRT_GlobalFilterTextInput - Global search input
• MRT_EditCellTextInput - Inline editing input

Hooks

• useMantineReactTable - Main hook for table functionality
• useMRT_TableInstance - Table instance hook
• useMRT_TableOptions - Table options hook
• useMRT_Effects - Effects hook
• useMRT_Rows - Rows management hook

Utilities

• aggregationFns - Aggregation functions
• filterFns - Filter functions
• sortingFns - Sorting functions
• column.utils - Column utilities
• row.utils - Row utilities
• style.utils - Styling utilities

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please:

1. Check the issues page
2. Create a new issue with detailed information
3. Include code examples and error messages

Changelog

1.0.0

• Initial release
• Complete Mantine React Table component library
• Converted from TypeScript to JSX for broader compatibility
• Comprehensive set of table components and utilities