Custom Components

You can pass custom components to further customize the table:

import React from 'react'
import Chip from '@mui/material/Chip'
import DataTable, { TableFilterList } from 'mui-datatable-delight'

const CustomChip = ({ label, onDelete }) => {
    return (
        <Chip
            variant="outlined"
            color="secondary"
            label={label}
            onDelete={onDelete}
        />
    )
}

const CustomFilterList = props => {
    return <TableFilterList {...props} ItemComponent={CustomChip} />
}

function CustomDataTable() {
    return (
        <DataTable
            columns={columns}
            data={data}
            components={{
                TableFilterList: CustomFilterList
            }}
        />
    )
}

Supported customizable components:

• Checkbox — A special "data-description" prop lets you differentiate checkboxes example. Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col']. The dataIndex is also passed via the "data-index" prop.
• ExpandButton — See the example.
• DragDropBackend
• TableBody
• TableViewCol — The component that displays the view/hide list of columns on the toolbar.
• TableFilterList — You can pass ItemComponent prop to render custom filter list item.
• TableFooter
• TableHead
• TableResize
• TableToolbar
• TableToolbarSelect
• Tooltip
• icons — An object containing optional replacement icon classes for the actions toolbar. See the example.
  • SearchIcon
  • DownloadIcon
  • PrintIcon
  • ViewColumnIcon
  • FilterIcon

For more information, please see this example. Additionally, all examples can be viewed live at example pages.