mantine-custom-table v1.1.0

Mantine Custom Table

A customizable table component built with Mantine and Mantine React Table. This component simplifies the process of creating data tables with advanced features and allows for extensive customization to fit your application's design.

Table of Contents

• Mantine Custom Table
  • Table of Contents
  • Installation
  • Peer Dependencies
  • Usage
    • Basic Example
    • Props
  • Customization
    • Using classNames
    • Using styles
    • Disabling Default Styles with unstyled
  • Advanced Usage
    • Custom Toolbar Actions
    • Passing Additional Table Props
  • TypeScript Support
  • Contributing
  • License
  • Contact
  • Additional Information
    • Exporting Data
    • Handling Empty Data
    • Integrating with Date Filters
    • Styling with Emotion or Styled Components
    • Common Issues
      • Missing Peer Dependencies
      • Version Compatibility

Installation

Install the package via npm:

npm install mantine-custom-table

Peer Dependencies

This package relies on several peer dependencies that you need to install in your project:

npm install react react-dom @mantine/core mantine-react-table @tabler/icons-react export-to-csv

Ensure that you have the following versions (or compatible versions) in your package.json:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@mantine/core": "^6.0.0",
  "mantine-react-table": "^1.0.0",
  "@tabler/icons-react": "^2.0.0",
  "export-to-csv": "^1.0.0"
}

Usage

Basic Example

import React from 'react';
import MantineTable from 'mantine-custom-table';

const rowData = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  // ... more data
];

const columnData = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  // ... more columns
];

const App = () => {
  return (
    <MantineTable
      rowData={rowData}
      columnData={columnData}
      dataLoading={false}
      title="User List"
    />
  );
};

export default App;

Props

Customization

The MantineTable component supports extensive customization through the classNames, styles, and unstyled props. This allows you to tailor the appearance of the table to match your application's design.

Using classNames

The classNames prop accepts an object where keys are the component parts you want to customize, and values are the custom class names you want to apply.

Example:

<MantineTable
  // ... other props
  classNames={{
    root: 'my-table-root',
    headerCell: 'my-header-cell',
    cell: 'my-cell',
    row: 'my-row',
    // ... other component parts
  }}
/>

In your CSS file:

.my-table-root {
  border: 2px solid #000;
}

.my-header-cell {
  background-color: #f0f0f0;
  font-weight: bold;
}

.my-cell {
  padding: 16px;
}

.my-row:hover {
  background-color: #e0e0e0;
}

Using styles

The styles prop allows you to apply inline styles directly to component parts. It's an object where keys are the component parts, and values are style objects.

Example:

<MantineTable
  // ... other props
  styles={{
    headerCell: {
      backgroundColor: '#f0f0f0',
      fontWeight: 'bold',
    },
    cell: {
      padding: '16px',
    },
    row: {
      '&:hover': {
        backgroundColor: '#e0e0e0',
      },
    },
    // ... other component parts
  }}
/>

Disabling Default Styles with unstyled

If you prefer to start from scratch with your own styles, you can disable all default Mantine styles using the unstyled prop.

Example:

<MantineTable
  // ... other props
  unstyled={true}
/>

Advanced Usage

Custom Toolbar Actions

You can add custom elements to the table's toolbar using the extraElement prop. This allows you to include additional buttons, filters, or any other components alongside the default export button.

Example:

import { Button } from '@mantine/core';
import { IconFilter } from '@tabler/icons-react';

const App = () => {
  const handleFilterClick = () => {
    // Implement filter logic here
  };

  return (
    <MantineTable
      // ... other props
      extraElement={
        <Button
          onClick={handleFilterClick}
          leftIcon={<IconFilter size={14} />}
          variant="light"
          radius="md"
          color="blue"
        >
          Filter
        </Button>
      }
    />
  );
};

Passing Additional Table Props

You can pass additional props to the underlying useMantineReactTable hook using the TableProps prop. This allows for advanced configurations such as enabling sorting, filtering, pagination, etc.

Example:

<MantineTable
  // ... other props
  TableProps={{
    enableSorting: true,
    enableFiltering: true,
    initialState: {
      sorting: [{ id: 'name', desc: false }],
    },
    // ... other Mantine React Table options
  }}
/>

TypeScript Support

If you're using TypeScript, you can define types for the rowData and columnData props to ensure type safety.

Example:

import React from 'react';
import MantineTable from 'mantine-custom-table';

interface User {
  id: number;
  name: string;
  email: string;
}

const rowData: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  // ... more data
];

const columnData = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  // ... more columns
];

const App: React.FC = () => {
  return (
    <MantineTable
      rowData={rowData}
      columnData={columnData}
      dataLoading={false}
      title="User List"
    />
  );
};

export default App;

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository.

To contribute:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes and commit them with clear messages.
4. Open a pull request to the main repository.

License

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

Contact

For questions or support, please contact Your Name.

Note: Replace placeholders like yourusername, Your Name, and your.email@example.com with your actual GitHub username, name, and email address.

Additional Information

Exporting Data

The component includes an export functionality that allows users to export the table data as a CSV file.

Export Button:

The export button is included by default in the table's toolbar. It uses the export-to-csv library to generate and download the CSV file.

Customizing the Export:

If you need to customize the export functionality, you can modify the handleExportData function in the component's source code or override it by passing a custom function via the TableProps.

Handling Empty Data

If the rowData array is empty and dataLoading is false, the table will display a message indicating that there are no records to display.

Example:

<MantineTable
  rowData={[]}
  columnData={columnData}
  dataLoading={false}
  title="Empty Table"
/>

Integrating with Date Filters

The component includes optional props selectedPeriod and setSelectedPeriod to integrate with date filtering components.

Example:

import { useState } from 'react';

const App = () => {
  const [selectedPeriod, setSelectedPeriod] = useState(null);

  return (
    <MantineTable
      // ... other props
      selectedPeriod={selectedPeriod}
      setSelectedPeriod={setSelectedPeriod}
      extraElement={
        <DateFilterComponent
          selectedPeriod={selectedPeriod}
          setSelectedPeriod={setSelectedPeriod}
        />
      }
    />
  );
};

Styling with Emotion or Styled Components

Since Mantine uses Emotion under the hood, you can leverage Emotion or Styled Components for advanced styling.

Using Emotion's css Prop:

import { css } from '@emotion/react';

<MantineTable
  // ... other props
  styles={{
    headerCell: css`
      background-color: #f0f0f0;
      font-weight: bold;
    `,
  }}
/>

Note: Ensure you have @emotion/react installed:

npm install @emotion/react

Common Issues

Missing Peer Dependencies

If you encounter errors related to missing modules, ensure that all peer dependencies are installed in your project.

Version Compatibility

Ensure that the versions of the peer dependencies are compatible with the versions specified in the peerDependencies section of this package's package.json.

Happy coding!