MUI DataTable Delight

Is a modern revival of the popular gregnb/mui-datatables, offering a sleek, feature-rich table component built with the latest Material UI. 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!

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}
        />
    )
}