MUI DataTable Delight

Is a modern revival of the popular gregnb/mui-datatables, offering a sleek, feature-rich table component built with the latest . Designed for effortless data handling, it includes robust support for sorting, filtering, pagination, and row selection. With its intuitive interface and responsive design, MUI <DataTable/> Delight is perfect for enhancing any modern web application. Experience the power of Material-UI v6 with this versatile and easy-to-use data table solution!


Name Gabby George	Title Business Analyst	Location Minneapolis
Name Aiden Lloyd	Title Business Consultant	Location Dallas
Name Jaden Collins	Title Attorney	Location Santa Ana
Name Franky Rees	Title Business Analyst	Location St. Petersburg
Name Aaren Rose	Title	Location Toledo

Installation

npm install mui-datatable-delight

Usage

For a simple table:

import DataTable from 'mui-datatable-delight'

export default function Page() {
    const columns = ['Name', 'Company', 'City', 'State']

    const data = [
        ['Joe James', 'Test Corp', 'Yonkers', 'NY'],
        ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
        ['Bob Herm', 'Test Corp', 'Tampa', 'FL'],
        ['James Houston', 'Test Corp', 'Dallas', 'TX']
    ]

    return <DataTable title="Employee List" data={data} columns={columns} />
}

Or customize columns:

import DataTable from 'mui-datatable-delight'

export default function Page() {
    const columns = [
        {
            name: 'name',
            label: 'Name',
            options: {
                filter: true,
                sort: true
            }
        },
        {
            name: 'company',
            label: 'Company',
            options: {
                filter: true,
                sort: false
            }
        },
        {
            name: 'city',
            label: 'City',
            options: {
                filter: true,
                sort: false
            }
        },
        {
            name: 'state',
            label: 'State',
            options: {
                filter: true,
                sort: false
            }
        }
    ]

    const data = [
        {
            name: 'Joe James',
            company: 'Test Corp',
            city: 'Yonkers',
            state: 'NY'
        },
        {
            name: 'John Walsh',
            company: 'Test Corp',
            city: 'Hartford',
            state: 'CT'
        },
        {
            name: 'Bob Herm',
            company: 'Test Corp',
            city: 'Tampa',
            state: 'FL'
        },
        {
            name: 'James Houston',
            company: 'Test Corp',
            city: 'Dallas',
            state: 'TX'
        }
    ]

    const options = {
        filterType: 'checkbox'
    }

    return (
        <DataTable
            title="Employee List"
            data={data}
            columns={columns}
            options={options}
        />
    )
}