Mantine ListViewTable Component

Configure.Column.Width.Constraints.in.Data.Table.mp4

---

Overview

This component is created on top of the Mantine library.

This component extends Mantine UI by adding advanced table features inspired by the List View in macOS Finder. It enhances the Mantine Table component with a familiar, intuitive interface for displaying item lists in a structured, table-like format. Users can reorder and resize columns dynamically, providing greater flexibility and control over data presentation. This makes it ideal for applications needing a modern, customizable list view with enhanced interactivity.

👉 You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-list-view-table

or

yarn add @gfazioli/mantine-list-view-table

After installation import package styles at the root of your application:

import '@gfazioli/mantine-list-view-table/styles.css';

Usage

import { ListViewTable } from '@gfazioli/mantine-list-view-table';
import { Badge, Text } from '@mantine/core';

function Demo() {
  const data = [
    { id: 1, name: 'Documents', type: 'folder', size: '--', modified: '2024-06-01', kind: 'Folder' },
    { id: 2, name: 'README.md', type: 'file', size: '2.1 KB', modified: '2024-06-02', kind: 'Markdown' },
    { id: 3, name: 'package.json', type: 'file', size: '1.8 KB', modified: '2024-06-03', kind: 'JSON' },
    { id: 4, name: 'src', type: 'folder', size: '--', modified: '2024-06-04', kind: 'Folder' },
  ];

  const columns = [
    {
      key: 'name',
      title: 'Name',
      sortable: true,
      renderCell: (record) => (
        <Text fw={record.type === 'folder' ? 600 : 400}>{record.name}</Text>
      ),
    },
    {
      key: 'kind',
      title: 'Kind',
      sortable: true,
      width: 120,
      renderCell: (record) => (
        <Badge variant="light" color={record.type === 'folder' ? 'blue' : 'gray'} size="sm">
          {record.kind}
        </Badge>
      ),
    },
    {
      key: 'size',
      title: 'Size',
      sortable: true,
      textAlign: 'right',
      width: 180,
    },
    {
      key: 'modified',
      title: 'Date Modified',
      sortable: true,
      width: 120,
    },
  ];

  return (
    <ListViewTable
      columns={columns}
      data={data}
      rowKey="id"
      withTableBorder
      highlightOnHover
      onRowClick={(record) => {
        console.log('Clicked:', record.name);
      }}
    />
  );
}

demo.mp4