Mantine DataTable Extended

An extension library for Mantine DataTable , providing powerful and easy-to-use features for building data tables in React applications.

Why this library?

Mantine and Mantine DataTable are excellent libraries, trusted and used by many developers. However, during use, I noticed some limitations:

• Column toggling: No dedicated component for managing column visibility
• Multi-column sorting: Can only sort by one column at a time
• Search and Filter: Not standardized, requiring full customization
• Pagination: Fixed to footer, causing issues with async data loading

Key Features

🎯 Standardized Components

• DataTableSearch: Search with multi-column selection
• DataTableFilter: Filter data with various filter types (text, number, date, select, range…)
• DataTableSortList: Sort by multiple columns simultaneously
• DataTableColumnsToggle: Show/hide columns
• DataTablePagination: Flexible pagination that can be placed anywhere

🔗 URL State Management

• Uses Nuqs  to store state in URL
• Shareable links - share URLs with filters/search/sort applied
• SEO-friendly with SSR support
• Easy integration with server-side rendering

🚀 Server-Side Integration

• Next.js App Router support
• Server-side data prefetching
• Hybrid fetching with React Query
• Type-safe with TypeScript

🎨 Developer Experience

• Full TypeScript with type inference
• Consistent and easy-to-use API
• Customizable i18n for all text
• Flexible layout - arrange components as needed

Demo

Check out the full demo at demo page to experience all features.

Getting Started

See Installation to install and start using the library.

Documentation

• Installation - Installation and basic setup guide
• Components - Detailed component documentation
• Column Configuration - Column configuration and filter variants
• Server-Side Integration - Next.js SSR integration
• Advanced Usage - Advanced techniques
• API Reference - Complete API reference