DataGrid

Feature-rich data table with sorting, pagination, column resize/reorder, grouping, filtering, row selection, toolbar, and remote data support.

Local Data (Client-side)

Remote Data (Server-side Pagination)

With Grouping

Interact with a grid to see output...

// Local data grid with features
<?= $m->dataGrid('myGrid')
    ->columns([
        ['field' => 'id',     'title' => '#',    'width' => 50, 'sortable' => true],
        ['field' => 'name',   'title' => 'Name', 'sortable' => true],
        ['field' => 'status', 'title' => 'Status',
         'component' => ['type' => 'badge', 'textBind' => 'status']],
        ['field' => 'progress', 'title' => 'Progress', 'width' => 160,
         'component' => ['type' => 'progressBar',
                         'valueBind' => 'progress',
                         'max' => 100, 'showPercent' => true]],
    ])
    ->dataSource($rows)
    ->sortable()
    ->resizable()
    ->pageable(20)
    ->selectable()
    ->filterable()
    ->striped() ?>

// Remote data grid
<?= $m->dataGrid('remoteGrid')
    ->columns([...])
    ->remoteUrl('/api/tasks')
    ->pageable(25, 'remote')
    ->sortable()
    ->toolbar([
        ['text' => 'Add', 'icon' => 'fa-plus', 'click' => 'addRow()'],
    ]) ?>

// Groupable grid
<?= $m->dataGrid('grouped')
    ->columns([...])->dataSource($data)->groupable() ?>

// Get grid instance
var grid = m.dataGrid('myGrid');

// Refresh remote data
grid.refresh();

// Replace local data
grid.setData(newArray);

// Pagination
grid.goToPage(2);

// Sorting
grid.sort('name', 'asc');
grid.clearSort();

// Filtering
grid.clearFilters();

// Grouping
grid.groupBy('role');
grid.clearGroup();

// Extra params for remote
grid.setExtraParams({filter: 'active'});

// Get data
var data = grid.getData();        // current page
var total = grid.getTotal();      // total records
var selected = grid.getSelectedData();

// Clean up
grid.destroy();

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->dataGrid($id)`	`string`	Create a DataGrid component.
`->columns($cols)`	`array`	Define columns. Each column: `field`, `title`, `width`, `sortable`, `format`, `template`, `component`, `align`, `frozen`, `hidden`, `wrap`.
`->dataSource($data)`	`array`	Provide local data (array of assoc arrays).
`->remoteUrl($url, $method)`	`string, string`	Fetch data from a remote URL. Expected response: `{data: [], total: N}`.
`->remoteHeaders($headers)`	`array`	Extra HTTP headers for remote requests.
`->pageable($pageSize, $mode)`	`int, string`	Enable pagination. Mode: `local` or `remote`.
`->sortable()`		Enable column sorting.
`->resizable()`		Enable column resize.
`->reorderable()`		Enable column drag-reorder.
`->groupable()`		Enable row grouping by column.
`->selectable()`		Enable single-row selection.
`->filterable()`		Add column filter inputs.
`->extraParams($params)`	`array`	Extra params sent with every remote request.
`->height($height)`	`string`	Set fixed height with scrollable body (e.g. `400px`).
`->striped()`		Enable striped rows.
`->borderless()`		Remove outer border.
`->toolbar($buttons)`	`array`	Add toolbar buttons: `[text, icon, click, class]`.
`->emptyState($title, $msg)`	`string, string`	Empty-data message.
`->onDataBound($callback)`	`string`	JS callback after data renders.
`->onRowClick($callback)`	`string`	JS callback on row click.
`->onRowSelect($callback)`	`string`	JS callback on row selection.
`->onRowExpand($callback)`	`string`	JS callback on group expand/collapse.

JS JS Methods

Method / Property	Parameters	Description
`m.dataGrid(id, opts)`	`string, ?object`	Get or create DataGrid instance.
`refresh()`		Re-fetch remote data (returns Promise for remote grids).
`setData(array)`	`array`	Replace the local dataset.
`goToPage(num)`	`int`	Navigate to a specific page.
`sort(field, dir)`	`string, string`	Sort by field. Dir: `asc` or `desc`.
`clearSort()`		Clear current sort.
`clearFilters()`		Clear all column filters.
`groupBy(field)`	`string`	Group rows by the given field.
`clearGroup()`		Remove grouping.
`setExtraParams(obj, merge)`	`object, ?bool`	Set extra remote request params. Pass `true` to merge.
`getExtraParams()`		Get current extra params object.
`getData()`		Get the data array for the current page.
`getTotal()`		Get total record count.
`getSelectedData()`		Get the selected row data.
`destroy()`		Clean up event listeners and DOM.

JS Column Component Types

Method / Property	Parameters	Description
`badge`	`textBind, text, variant, variantBind, icon, iconBind`	Render a badge in the cell.
`label`	`textBind, text, variant, variantBind, icon, iconBind`	Render a styled label.
`icon`	`iconBind, icon`	Render a Font Awesome icon.
`checkbox`	`valueBind, readonly`	Render a checkbox (read-only by default).
`rating`	`valueBind, max, halfStars`	Render a star rating.
`progressBar`	`valueBind, max, variant, showPercent, striped, animated`	Render a progress bar.