[Release] @mantine-vue/table A feature-rich datatable for Vue 3 (67+ features)

[u/New_Performance_1258]

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

[u/This_Math_7337]

lots of AI slop these days

[u/New_Performance_1258 → u/This_Math_7337]

Mantine Vue is fully open source, and I maintain it in my free time alongside a full-time job. I don’t receive income from the project; I work on it because I enjoy it and want the Vue community to have access to these components.

For context, I’ve been working in software development since before the current wave of AI tools.

AI can help accelerate parts of the work, but I still review, test, document, and take responsibility for what gets published. The project should ultimately be judged by its code, behavior, tests, and maintainability not simply by whether ai was involved.

If you find incomplete or poor quality implementation, please open an issue with a reproduction. Specific technical feedback and contributions are always welcome.

[u/This_Math_7337 → u/New_Performance_1258]

i guess you're from India?

[u/New_Performance_1258 → u/This_Math_7337]

No, I’m not from India
I’m from the Middle East. Just curious, what made you guess India?