The type of data objects displayed in each row
A Mithril component that renders the data table
The DataTable component provides a feature-rich interface for displaying and interacting with tabular data. It supports both controlled and uncontrolled modes for all interactive features.
Key Features:
interface User { id: number; name: string; email: string; }
const users: User[] = [...];
const columns: DataTableColumn<User>[] = [
{ key: 'name', title: 'Name', field: 'name', sortable: true, filterable: true },
{ key: 'email', title: 'Email', field: 'email', sortable: true, filterable: true }
];
return m(DataTable<User>, { data: users, columns });
return m(DataTable<User>, {
data: users,
columns,
title: 'User Management',
striped: true,
hoverable: true,
height: 400,
// Pagination
pagination: { page: 0, pageSize: 10, total: users.length },
onPaginationChange: (pagination) => console.log('Page changed:', pagination),
// Selection
selection: {
mode: 'multiple',
selectedKeys: [],
getRowKey: (user) => String(user.id),
onSelectionChange: (keys, selectedUsers) => console.log('Selection:', selectedUsers)
},
// Search
enableGlobalSearch: true,
searchPlaceholder: 'Search users...',
// Events
onRowClick: (user, index, event) => console.log('Clicked:', user),
onRowDoubleClick: (user) => editUser(user),
// Styling
getRowClassName: (user) => user.active ? '' : 'inactive-row'
});
A comprehensive data table component with sorting, filtering, pagination, and selection capabilities.