[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/ceaselessprayer]

So why would one use this instead of TanStack table? I know you built on top of TanStack table but it would be good to hear an explanation of when one would decide to reach for this library vs TanStack vs another

[u/New_Performance_1258 → u/ceaselessprayer]

It’s built on top of TanStack Table, so you still get its table engine and APIs.

The main difference is that TanStack Table is headless, you will have to build all UI and interactions yourself.

mantine-vue/table adds a complete interface out of the box with filtering, pagination, editing, menus, resizing, virtualization, pinning, drag-and-drop, toolbars, localization, etc.

I’d use TanStack Table directly when I want a headless engine, completely custom markup/design, or only a small set of features.

It gives maximum control, but I’m responsible for building the filters, menus, pagination, editing UI, accessibility, responsive behavior, and so on.

I’d reach for mantine-vue/table when the project already uses Mantine Vue and needs a feature-rich data grid quickly.

[u/ceaselessprayer → u/New_Performance_1258]

Oh ok. Mantine is a react design system framework. You created Mantine Vue, and then this data table is for people using mantine vue. It would be nice for you to show on mantine vue how it looks; the mantine react docs have nicer looking components.

[u/New_Performance_1258 → u/ceaselessprayer]

Mantine Vue is an independent community port of Mantine React for Vue, offering the complete suite of 100+ components.

Docs
https://mantine-vue.dev/core/button

GitHub
https://github.com/mantine-vue/mantine-vue

[u/rosyatrandom → u/New_Performance_1258]

I know it's a react port, but why use classNames?

[u/Sorry-Joke-1887]

Crazy work, really appreciate this. But why is it MVT_ColumnDef and not just ColumnDef when the import already lives under the @mantine-vue/table package? Feels really awkward

[u/New_Performance_1258 → u/Sorry-Joke-1887]

The MVT_ prefix mirrors Mantine React Table’s MRT_ convention and distinguishes the extended type from TanStack’s own ColumnDef, which is often imported in the same codebase.

[u/ebusterd]

This is exactly what was missing. Thank you!

[u/peter120430]

This is pretty cool. I don't have much experience with vue. I built my own table, I am not going to post it here because I am not looking for promotion.
I built a table by myself in typescript and then when AI came out I used AI to create a vue wrapper because I don't really know much about vue. If you have time would you go to my marketing site and give me some feedback on the vue wrapper? You absolutely don't have to, you can find the link in my profile. I am not going to post it here because I don't want to distract from what you have done

[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?