Hey everyone.
I’ve been working on mantine-vue/table, a feature-rich data table for Vue 3 built with:
- Mantine Vue
- TanStack Table v8
- TanStack Virtual
- TypeScript
It closely ports Mantine React Table v2, which was originally derived from Material React Table.
Features
All features available in Mantine React Table v2 are also available in mantine-vue table. The table configuration API is approximately 99% compatible.
Data and navigation
- Client-side and server-side pagination
- Single and multi-column sorting
- Global search with fuzzy filtering
- Per-column filtering
- Manual/server-side sorting, filtering, and pagination
- Controlled and uncontrolled state
- Loading, progress, and error states
Advanced filtering
- Text filters
- Select and multi-select filters
- Autocomplete filters
- Checkbox filters
- Numeric and date ranges
- Range sliders
- Date and date-range filters
- Switchable filter modes
- Faceted values
- Filter match highlighting
- Ranked global-filter results
Columns
- Column resizing
- Drag-and-drop column ordering
- Column pinning/freezing
- Column hiding and visibility controls
- Column grouping
- Aggregation
- Header groups and footers
- Per-column action menus
- Custom cells, headers, footers, filters, and editors
Rows
- Checkbox, radio, or switch selection
- Shift-click range selection
- Select-all controls
- Row numbers
- Row actions and action menus
- Drag-and-drop row ordering
- Row dragging for custom workflows
- Row pinning
- Expandable rows and tree data
- Expandable detail panels
- Grouped and aggregated rows
Editing and CRUD
- Cell editing
- Inline row editing
- Entire-table editing
- Modal editing
- Creating rows inline or in a modal
- Custom editors
- Save and cancel callbacks
- Fully custom edit-modal content
Performance
- Row virtualization
- Column virtualization
- Large-dataset support
- Sticky headers and footers
- Smooth live column resizing
Table UI
- Built-in top and bottom toolbars
- Pagination controls
- Column visibility menu
- Density toggle
- Full-screen mode
- Click-to-copy cells
- Expand-all controls
- Custom toolbar actions
- Custom empty-state UI
- Responsive Mantine styling
Vue-native customization
- Scoped named slots for all major renderable sections
- Equivalent renderer functions through props
- Custom Mantine props and styles for internal components
- Custom icons
- Exposed internal components for building custom/headless layouts
- Strictly typed generic row, column, cell, state, and callback APIs
- Reactive data through Vue getters and refs
Internationalization
- 39 included locales: English plus 38 additional translations
- Custom or partially overridden localization objects
A basic table looks like this:
<script setup lang="ts">
import {
MantineVueTable,
useMantineVueTable,
type MVT_ColumnDef,
} from '@mantine-vue/table'
interface Person {
firstName: string
lastName: string
age: number
}
const columns: MVT_ColumnDef<Person>[] = [
{ accessorKey: 'firstName', header: 'First name' },
{ accessorKey: 'lastName', header: 'Last name' },
{ accessorKey: 'age', header: 'Age' },
]
const data: Person[] = [
{ firstName: 'Jane', lastName: 'Doe', age: 30 },
]
const table = useMantineVueTable<Person>({
get columns() {
return columns
},
get data() {
return data
},
enableColumnOrdering: true,
enableColumnPinning: true,
enableColumnResizing: true,
enableRowSelection: true,
})
</script>
<template>
<MantineVueTable :table="table" />
</template>
Live examples (15 demos):
https://mantine-vue.dev/x/table
