mithril-materialized
    Preparing search index...

    Interface DataTableAttrs<T>

    Main DataTable component attributes

    m(DataTable, {
      data: users,
      columns: [
        { key: 'name', title: 'Name', field: 'name', sortable: true },
        { key: 'email', title: 'Email', field: 'email', filterable: true }
      ]
    })

    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)
      }
    })
    interface DataTableAttrs<T = Record<string, any>> {
        centered?: boolean;
        class?: string;
        className?: string;
        columns: DataTableColumn<T>[];
        data: T[];
        emptyMessage?: string;
        enableGlobalSearch?: boolean;
        filter?: DataTableFilter;
        getRowClassName?: (row: T, index: number) => string;
        height?: number;
        hoverable?: boolean;
        i18n?: DataTableI18n;
        id?: string;
        key?: string | number;
        loading?: boolean;
        onFilterChange?: (filter: DataTableFilter) => void;
        onPaginationChange?: (pagination: DataTablePagination) => void;
        onRowClick?: (row: T, index: number, event: Event) => void;
        onRowDoubleClick?: (row: T, index: number, event: Event) => void;
        onSortChange?: (sort: DataTableSort) => void;
        pagination?: DataTablePagination;
        responsive?: boolean;
        searchPlaceholder?: string;
        selection?: DataTableSelection<T>;
        sort?: DataTableSort;
        striped?: boolean;
        title?: string;
        onbeforeremove?(this: any, vnode: VnodeDOM<any, any>): void | Promise<any>;
        onbeforeupdate?(
            this: any,
            vnode: Vnode<any, any>,
            old: VnodeDOM<any, any>,
        ): boolean | void;
        oncreate?(this: any, vnode: VnodeDOM<any, any>): any;
        oninit?(this: any, vnode: Vnode<any, any>): any;
        onremove?(this: any, vnode: VnodeDOM<any, any>): any;
        onupdate?(this: any, vnode: VnodeDOM<any, any>): any;
        [property: string]: any;
    }

    Type Parameters

    • T = Record<string, any>

      The type of the data object for each row

    Hierarchy

    • Attributes
      • DataTableAttrs

    Indexable

    • [property: string]: any

      Any other virtual element properties, including attributes and event handlers.

    Index

    Properties

    centered? class? className? columns data emptyMessage? enableGlobalSearch? filter? getRowClassName? height? hoverable? i18n? id? key? loading? onFilterChange? onPaginationChange? onRowClick? onRowDoubleClick? onSortChange? pagination? responsive? searchPlaceholder? selection? sort? striped? title?

    Methods

    onbeforeremove? onbeforeupdate? oncreate? oninit? onremove? onupdate?

    Properties

    centered?: boolean

    Center-align all table content

    class?: string

    The class name(s) for this virtual element, as a space-separated list.

    className?: string

    Additional CSS classes to apply to the table

    columns: DataTableColumn<T>[]

    Column configuration array defining how data should be displayed

    data: T[]

    Array of data objects to display in the table

    emptyMessage?: string

    Message to display when data array is empty

    enableGlobalSearch?: boolean

    Show global search input above the table

    filter?: DataTableFilter

    Current filter state. If provided, filtering is controlled externally

    getRowClassName?: (row: T, index: number) => string

    Function to generate custom CSS classes for each row

    height?: number

    Fixed table height in pixels (enables scrolling)

    hoverable?: boolean

    Enable row highlighting on hover

    i18n?: DataTableI18n

    Internationalization configuration for UI text

    id?: string

    Custom HTML id attribute for the table container

    key?: string | number

    A key to optionally associate with this element.

    loading?: boolean

    Show loading spinner and disable interactions

    onFilterChange?: (filter: DataTableFilter) => void

    Callback invoked when filter values change

    onPaginationChange?: (pagination: DataTablePagination) => void

    Callback invoked when user changes page or page size

    onRowClick?: (row: T, index: number, event: Event) => void

    Callback invoked when a row is clicked

    onRowDoubleClick?: (row: T, index: number, event: Event) => void

    Callback invoked when a row is double-clicked

    onSortChange?: (sort: DataTableSort) => void

    Callback invoked when user changes sort order

    pagination?: DataTablePagination

    Pagination configuration. If provided, pagination is controlled externally

    responsive?: boolean

    Make table responsive with horizontal scrolling on small screens

    searchPlaceholder?: string

    Placeholder text for the global search input

    selection?: DataTableSelection<T>

    Row selection configuration

    sort?: DataTableSort

    Current sort configuration. If provided, sorting is controlled externally

    striped?: boolean

    Apply alternating row background colors

    title?: string

    Optional title displayed above the table

    Methods

    • The onbeforeremove hook is called before a DOM element is detached from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns void | Promise<any>

    • The onbeforeupdate hook is called before a vnode is diffed in a update.

      Parameters

      • this: any
      • vnode: Vnode<any, any>
      • old: VnodeDOM<any, any>

      Returns boolean | void

    • The oncreate hook is called after a DOM element is created and attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The oninit hook is called before a vnode is touched by the virtual DOM engine.

      Parameters

      • this: any
      • vnode: Vnode<any, any>

      Returns any

    • The onremove hook is called before a DOM element is removed from the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The onupdate hook is called after a DOM element is updated, while attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    Settings

    Member Visibility

    On This Page

    Properties
    Methods