mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.11

package/README.md

@@ -20,7 +20,7 @@ This is a **major breaking release** that removes all external JavaScript depend
 
 - **Removed dependencies**: No longer requires `materialize-css` or `material-icons` packages
 - **Component updates**: DatePicker and TimePicker now have custom implementations
-- **Icon changes**: Uses custom SVG icons instead of Material Icons font
+- **Icon changes**: Library uses custom SVG icons. Material Icons font is supported too, but not required.
 - **Installation**: Simpler installation process with fewer dependencies
 
 ### 📈 Migration from v1.x
@@ -81,7 +81,10 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
   - MaterialBox
   - Carousel
   - Pagination
+  - PaginationControls
   - Parallax
+- Data & Tables
+  - DataTable (sorting, filtering, pagination, selection)
 - Additional
   - Label
   - HelperText
@@ -114,6 +117,7 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
      TextInput, 
      Button, 
      DatePicker,
+     DataTable,
      ThemeToggle,
      FileUpload,
      Sidenav,
@@ -183,36 +187,31 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 - ✅ Breadcrumb navigation component
 - ✅ Wizard/Stepper component for multi-step forms
 
-**🔄 Currently Working On:**
+**✅ Recently Completed:**
 
-- 🔄 DataTable component with sorting, filtering, and pagination
-
-**📋 Phase 1 Remaining:**
-
-- Enhanced TypeScript definitions with better JSDoc comments
-- Performance optimizations and bundle size improvements
+- ✅ DataTable component with sorting, filtering, and pagination
+- ✅ Enhanced TypeScript definitions with better JSDoc comments
+- ✅ Performance optimizations and bundle size improvements
 
 ### 🎯 Phase 2: Advanced Components & Features
 
-**Navigation & Layout:**
-
-- AppBar/Toolbar component with responsive behavior
-- Bottom navigation component for mobile apps
-- Drawer/Sidebar component with overlay and push modes
-- Grid system enhancements with CSS Grid support
-
 **Data Display:**
 
-- Enhanced DataTable with virtual scrolling for large datasets
 - TreeView component for hierarchical data
 - Card layouts with enhanced Material Design 3.0 styling
-- List components with advanced features (virtual scrolling, infinite load)
 
 **Input & Forms:**
 
 - Advanced date range picker
 - Autocomplete with async data loading
 
+**Navigation & Layout:**
+
+- AppBar/Toolbar component with responsive behavior
+- Bottom navigation component for mobile apps
+- Drawer/Sidebar component with overlay and push modes
+- Grid system enhancements with CSS Grid support
+
 ### 🔮 Phase 3: Modern Features & Integration
 
 **Developer Experience:**
@@ -240,7 +239,7 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 
 **Current Status (v2.0.0-beta.5):**
 
-- Total: 64KB gzipped (44KB JS + 20KB CSS)
+- Total: 70KB gzipped (44KB JS + 26KB CSS)
 - Modular CSS can reduce bundle by 30-50%
 
 **Phase 1 Targets:**
@@ -378,7 +377,7 @@ m(ThemeToggle); // Simple toggle button
 
 For advanced customization, you can use the SASS source files directly:
 
-```scss
+```css
 // Import all SASS components
 @import 'mithril-materialized/sass/materialize.scss';
 

package/dist/advanced.css

@@ -205,21 +205,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -550,8 +550,8 @@ td, th {
 .collection .collection-item.avatar i.circle {
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
-  background-color: #999;
+  color: var(--mm-text-on-primary, #fff);
+  background-color: var(--mm-text-disabled, #999);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -573,7 +573,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;

package/dist/button.d.ts

@@ -1,30 +1,75 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
+import { MaterialPosition, IconClass, ButtonVariant } from './types';
+/**
+ * HTML attributes that can be passed to button elements
+ * @deprecated Use native HTML attributes directly instead
+ */
 export interface HtmlAttrs {
     id?: string;
     for?: string;
     placeholder?: string;
     autofocus?: boolean;
     disabled?: boolean;
-    type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
+    type?: 'submit' | 'button' | 'reset';
 }
+/**
+ * Enhanced button attributes with improved TypeScript support
+ * @example
+ * ```typescript
+ * // Basic button
+ * m(Button, { label: 'Click me' })
+ *
+ * // Submit button with icon
+ * m(Button, {
+ *   variant: { type: 'submit' },
+ *   label: 'Save',
+ *   iconName: 'save',
+ *   iconClass: 'small left'
+ * })
+ *
+ * // Modal trigger button
+ * m(Button, {
+ *   variant: { type: 'modal', modalId: 'my-modal' },
+ *   label: 'Open Modal'
+ * })
+ * ```
+ */
 export interface ButtonAttrs extends Attributes {
-    /** Optional (e.g. in case you only want to use an icon) button label */
+    /** Button label text (optional for icon-only buttons) */
     label?: string;
-    /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
+    /** Material icon name - see https://materializecss.com/icons.html */
     iconName?: string;
-    /** Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right' */
-    iconClass?: string;
     /**
-     * If the button is intended to open a modal, specify its modal id so we can trigger it,
-     * @see https://materializecss.com/modals.html
+     * Icon size and position class
+     * @example 'small', 'medium left', 'large right'
+     */
+    iconClass?: IconClass;
+    /**
+     * Button behavior variant - determines button type and behavior
+     * @example
+     * { type: 'button' } - Standard button
+     * { type: 'submit' } - Form submit button
+     * { type: 'modal', modalId: 'my-modal' } - Modal trigger
+     * { type: 'reset' } - Form reset button
+     */
+    variant?: ButtonVariant;
+    /**
+     * @deprecated Use variant instead
+     * If the button is intended to open a modal, specify its modal id so we can trigger it
      */
     modalId?: string;
-    /** Some additional HTML attributes that can be attached to the button */
+    /**
+     * @deprecated Use native HTML attributes directly instead
+     * Some additional HTML attributes that can be attached to the button
+     */
     attr?: HtmlAttrs;
-    /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
+    /** Tooltip text to display on hover */
     tooltip?: string;
-    /** Optional location for the tooltip */
-    tooltipPostion?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Tooltip position
+     * @fixed typo: tooltipPostion -> tooltipPosition
+     */
+    tooltipPosition?: MaterialPosition;
 }
 /**
  * A factory to create new buttons.

package/dist/components.css

@@ -128,21 +128,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -473,8 +473,8 @@ td, th {
 .collection .collection-item.avatar i.circle {
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
-  background-color: #999;
+  color: var(--mm-text-on-primary, #fff);
+  background-color: var(--mm-text-disabled, #999);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -496,7 +496,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;

package/dist/core.css

@@ -525,21 +525,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -870,8 +870,8 @@ td, th {
 .collection .collection-item.avatar i.circle {
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
-  background-color: #999;
+  color: var(--mm-text-on-primary, #fff);
+  background-color: var(--mm-text-disabled, #999);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -893,7 +893,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;
@@ -3122,7 +3122,7 @@ select:disabled {
 }
 
 .select-wrapper i {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 
 .select-dropdown li.disabled,
@@ -3275,7 +3275,7 @@ input[type=range] {
 
 input[type=range]::-webkit-slider-runnable-track {
   height: 3px;
-  background: #c2c0c2;
+  background: var(--mm-border-color, #c2c0c2);
   border: none;
 }
 
@@ -3298,13 +3298,13 @@ input[type=range]::-webkit-slider-thumb {
 
 input[type=range] {
   /* fix for FF unable to apply focus style bug  */
-  border: 1px solid white;
+  border: 1px solid var(--mm-card-background, white);
   /*required for proper track sizing in FF*/
 }
 
 input[type=range]::-moz-range-track {
   height: 3px;
-  background: #c2c0c2;
+  background: var(--mm-border-color, #c2c0c2);
   border: none;
 }
 
@@ -3323,7 +3323,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 input[type=range]:-moz-focusring {
-  outline: 1px solid #fff;
+  outline: 1px solid var(--mm-card-background, #fff);
   outline-offset: -1px;
 }
 
@@ -3341,11 +3341,11 @@ input[type=range]::-ms-track {
 }
 
 input[type=range]::-ms-fill-lower {
-  background: #777;
+  background: var(--mm-text-secondary, #777);
 }
 
 input[type=range]::-ms-fill-upper {
-  background: #ddd;
+  background: var(--mm-surface-color, #ddd);
 }
 
 input[type=range]::-ms-thumb {

package/dist/datatable.d.ts

@@ -0,0 +1,291 @@
+import { Attributes, Component, Vnode, type FactoryComponent } from 'mithril';
+/**
+ * Attributes for custom cell renderer components in DataTable
+ * @template T The type of the data object for each row
+ */
+export interface CellRendererAttrs<T = Record<string, any>> {
+    /** The processed value from the data object for this cell */
+    value: any;
+    /** The complete row data object */
+    row: T;
+    /** The row index in the processed data */
+    index: number;
+    /** The column configuration object */
+    column: DataTableColumn<T>;
+}
+/**
+ * Configuration for a DataTable column
+ * @template T The type of the data object for each row
+ */
+export interface DataTableColumn<T = Record<string, any>> {
+    /** Unique identifier for the column (required for sorting/filtering) */
+    key: string;
+    /** Display title shown in the column header */
+    title: string;
+    /** Property name in the data object to display. If not provided, the entire row object is passed to the renderer */
+    field?: keyof T;
+    /** Custom cell renderer component for advanced cell content */
+    cellRenderer?: FactoryComponent<CellRendererAttrs<T>>;
+    /** @deprecated Use cellRenderer instead - Legacy render function for cell content */
+    render?: (value: any, row: T, index: number) => string | number | Vnode | Vnode[];
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Enable global search filtering for this column */
+    filterable?: boolean;
+    /** CSS width value (e.g., '100px', '20%', '10rem') */
+    width?: string;
+    /** Text alignment within cells */
+    align?: 'left' | 'center' | 'right';
+    /** CSS class applied to all cells in this column */
+    className?: string;
+    /** CSS class applied to the column header */
+    headerClassName?: string;
+}
+/**
+ * Configuration for DataTable sorting state
+ */
+export interface DataTableSort {
+    /** Key of the column to sort by (must match a column's key) */
+    column: string;
+    /** Sort direction - ascending or descending */
+    direction: 'asc' | 'desc';
+}
+/**
+ * Configuration for DataTable pagination
+ */
+export interface DataTablePagination {
+    /** Current page number (0-based indexing) */
+    page: number;
+    /** Number of items to display per page */
+    pageSize: number;
+    /** Total number of items in the dataset */
+    total: number;
+    /** Array of available page size options for user selection */
+    pageSizes?: number[];
+}
+/**
+ * Configuration for DataTable row selection functionality
+ * @template T The type of the data object for each row
+ */
+export interface DataTableSelection<T = Record<string, any>> {
+    /** Selection mode - controls how many rows can be selected */
+    mode: 'single' | 'multiple' | 'none';
+    /** Array of currently selected row keys */
+    selectedKeys: string[];
+    /** Function to generate a unique key for each row */
+    getRowKey: (row: T, index: number) => string;
+    /** Callback invoked when row selection changes */
+    onSelectionChange?: (selectedKeys: string[], selectedRows: T[]) => void;
+}
+/**
+ * Configuration for DataTable filtering functionality
+ */
+export interface DataTableFilter {
+    /** Global search term applied across all filterable columns */
+    searchTerm?: string;
+    /** Column-specific filter values keyed by column key */
+    columnFilters?: Record<string, any>;
+}
+/**
+ * Main DataTable component attributes
+ * @template T The type of the data object for each row
+ *
+ * @example Basic usage
+ * ```typescript
+ * m(DataTable, {
+ *   data: users,
+ *   columns: [
+ *     { key: 'name', title: 'Name', field: 'name', sortable: true },
+ *     { key: 'email', title: 'Email', field: 'email', filterable: true }
+ *   ]
+ * })
+ * ```
+ *
+ * @example With pagination and selection
+ * ```typescript
+ * m(DataTable, {
+ *   data: users,
+ *   columns,
+ *   pagination: { page: 0, pageSize: 10, total: users.length },
+ *   selection: {
+ *     mode: 'multiple',
+ *     selectedKeys: [],
+ *     getRowKey: (user) => user.id,
+ *     onSelectionChange: (keys, users) => console.log('Selected:', users)
+ *   }
+ * })
+ * ```
+ */
+export interface DataTableAttrs<T = Record<string, any>> extends Attributes {
+    /** Array of data objects to display in the table */
+    data: T[];
+    /** Column configuration array defining how data should be displayed */
+    columns: DataTableColumn<T>[];
+    /** Optional title displayed above the table */
+    title?: string;
+    /** Show loading spinner and disable interactions */
+    loading?: boolean;
+    /** Message to display when data array is empty */
+    emptyMessage?: string;
+    /** Apply alternating row background colors */
+    striped?: boolean;
+    /** Enable row highlighting on hover */
+    hoverable?: boolean;
+    /** Make table responsive with horizontal scrolling on small screens */
+    responsive?: boolean;
+    /** Center-align all table content */
+    centered?: boolean;
+    /** Fixed table height in pixels (enables scrolling) */
+    height?: number;
+    /** Additional CSS classes to apply to the table */
+    className?: string;
+    /** Custom HTML id attribute for the table container */
+    id?: string;
+    /** Current sort configuration. If provided, sorting is controlled externally */
+    sort?: DataTableSort;
+    /** Callback invoked when user changes sort order */
+    onSortChange?: (sort: DataTableSort) => void;
+    /** Pagination configuration. If provided, pagination is controlled externally */
+    pagination?: DataTablePagination;
+    /** Callback invoked when user changes page or page size */
+    onPaginationChange?: (pagination: DataTablePagination) => void;
+    /** Row selection configuration */
+    selection?: DataTableSelection<T>;
+    /** Current filter state. If provided, filtering is controlled externally */
+    filter?: DataTableFilter;
+    /** Callback invoked when filter values change */
+    onFilterChange?: (filter: DataTableFilter) => void;
+    /** Show global search input above the table */
+    enableGlobalSearch?: boolean;
+    /** Placeholder text for the global search input */
+    searchPlaceholder?: string;
+    /** Callback invoked when a row is clicked */
+    onRowClick?: (row: T, index: number, event: Event) => void;
+    /** Callback invoked when a row is double-clicked */
+    onRowDoubleClick?: (row: T, index: number, event: Event) => void;
+    /** Function to generate custom CSS classes for each row */
+    getRowClassName?: (row: T, index: number) => string;
+    /** Internationalization configuration for UI text */
+    i18n?: DataTableI18n;
+}
+/**
+ * Internationalization configuration for DataTable UI text
+ * Allows customization of all user-facing text strings
+ */
+export interface DataTableI18n {
+    /** Label for the search input */
+    search?: string;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** "Showing" text in pagination display */
+    showing?: string;
+    /** "to" text in pagination display (e.g., "Showing 1 to 10 of 100") */
+    to?: string;
+    /** "of" text in pagination display */
+    of?: string;
+    /** "entries" text in pagination display */
+    entries?: string;
+    /** "Page" text in pagination controls */
+    page?: string;
+    /** Message displayed when no data is available */
+    noDataAvailable?: string;
+    /** Loading message displayed during data fetch */
+    loading?: string;
+}
+/**
+ * Attributes for the PaginationControls component
+ */
+export interface PaginationControlsAttrs {
+    /** Pagination configuration object */
+    pagination?: DataTablePagination;
+    /** Callback function invoked when pagination state changes */
+    onPaginationChange: (pagination: DataTablePagination) => void;
+    /** Internationalization strings for pagination text */
+    i18n?: DataTableI18n;
+}
+/**
+ * Standalone Pagination Controls component
+ *
+ * Provides navigation controls for paginated data with customizable text labels.
+ * Includes first page, previous page, next page, last page buttons and page info display.
+ * Can be used independently of DataTable for any paginated content.
+ *
+ * @example
+ * ```typescript
+ * m(PaginationControls, {
+ *   pagination: { page: 0, pageSize: 10, total: 100 },
+ *   onPaginationChange: (newPagination) => console.log('Page changed:', newPagination),
+ *   i18n: { showing: 'Showing', to: 'to', of: 'of', entries: 'entries', page: 'Page' }
+ * })
+ * ```
+ */
+export declare const PaginationControls: FactoryComponent<PaginationControlsAttrs>;
+/**
+ * A comprehensive data table component with sorting, filtering, pagination, and selection capabilities.
+ *
+ * @template T The type of data objects displayed in each row
+ *
+ * @description
+ * 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:**
+ * - Sorting: Click column headers to sort data ascending/descending
+ * - Filtering: Global search across filterable columns
+ * - Pagination: Navigate through large datasets with customizable page sizes
+ * - Selection: Single or multiple row selection with callbacks
+ * - Custom rendering: Use cellRenderer for complex cell content
+ * - Responsive: Adapts to different screen sizes
+ * - Internationalization: Customize all UI text
+ * - Accessibility: Proper ARIA attributes and keyboard navigation
+ *
+ * @example Basic usage
+ * ```typescript
+ * 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 });
+ * ```
+ *
+ * @example Advanced usage with all features
+ * ```typescript
+ * 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'
+ * });
+ * ```
+ *
+ * @returns A Mithril component that renders the data table
+ */
+export declare const DataTable: <T = Record<string, any>>() => Component<DataTableAttrs<T>>;