https://github.com/gfazioli/mantine-list-view-table
Brings Finder-style List View to Mantine Table, with column reordering and resizing.
https://github.com/gfazioli/mantine-list-view-table
listview mantine-ui mantine-v8 nextjs reactjs reordering resizing table typescript
Last synced: 5 months ago
JSON representation
Brings Finder-style List View to Mantine Table, with column reordering and resizing.
- Host: GitHub
- URL: https://github.com/gfazioli/mantine-list-view-table
- Owner: gfazioli
- License: mit
- Created: 2025-07-08T13:58:44.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-12-18T11:27:17.000Z (6 months ago)
- Last Synced: 2025-12-20T01:00:43.675Z (6 months ago)
- Topics: listview, mantine-ui, mantine-v8, nextjs, reactjs, reordering, resizing, table, typescript
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-list-view-table/
- Size: 6.92 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Mantine ListViewTable Component
[](https://www.npmjs.com/package/@gfazioli/mantine-list-view-table)
[](https://www.npmjs.com/package/@gfazioli/mantine-list-view-table)
[](https://www.npmjs.com/package/@gfazioli/mantine-list-view-table)
---
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
[Mantine ListViewTable](https://gfazioli.github.io/mantine-list-view-table/) is a robust React component that enhances Mantine’s Table to deliver a modern, macOS Finder–style list view with advanced interactivity and layout control. Users can reorder and resize columns, while developers can choose internal behaviors or fully manage state externally for sorting, column reordering, and resizing.
The component provides fine‑grained typography control—via ellipsis and noWrap—and allows distinct header vs. cell presentation using cellStyle. It supports wide datasets through Table.ScrollContainer for horizontal scrolling, with optional sticky identifier columns, and works seamlessly inside ScrollArea with sticky headers and adjustable offsets.
For UX polish, it ships with configurable loading overlays (including custom loaders) and rich empty states ranging from simple messages to fully styled components with actions. These features make ListViewTable ideal for applications that need a clear, scalable, and highly interactive tabular list experience.
> [!note]
>
> → [Demo and Documentation](https://gfazioli.github.io/mantine-list-view-table/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
## Installation
```sh
npm install @gfazioli/mantine-list-view-table
```
or
```sh
yarn add @gfazioli/mantine-list-view-table
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-list-view-table/styles.css';
```
## Usage
```tsx
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) => (
{record.name}
),
},
{
key: 'kind',
title: 'Kind',
sortable: true,
width: 120,
renderCell: (record) => (
{record.kind}
),
},
{
key: 'size',
title: 'Size',
sortable: true,
textAlign: 'right',
width: 180,
},
{
key: 'modified',
title: 'Date Modified',
sortable: true,
width: 120,
},
];
return (
{
console.log('Clicked:', record.name);
}}
/>
);
}
```
## Sponsor
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
Your support helps me:
- Keep the project actively maintained with timely bug fixes and security updates
- Add new features, improve performance, and refine the developer experience
- Expand test coverage and documentation for smoother adoption
- Ensure long‑term sustainability without relying on ad hoc free time
- Prioritize community requests and roadmap items that matter most
Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.
Your help truly matters.
💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
---
https://github.com/user-attachments/assets/f4b7281c-eea0-41f9-b168-80d0f8374929
https://github.com/user-attachments/assets/a220d834-6787-429a-aab3-15e0c504f39c
---
[](https://www.star-history.com/#gfazioli/mantine-list-view-table&Timeline)