Getting Started
Backend
InstallationStructurePackageRoutingControllerEloquentEventContentAppendixCategoryCommandsDataGridDefine DataGridConfigurationEvent ListFormsMailerStorageUserable
Frontend
ExampleLanguage

MetaFox provides feature data grid builder to configure a JSON structure to render data grid in the frontend.

Mange Phrase Data Grid

Define DataGrid

<?php
namespace MetaFox\Core\Http\Resources\v1\Phrase\Admin;
use MetaFox\Platform\Resource\Actions;
use MetaFox\Platform\Resource\BatchActionMenu;
use MetaFox\Platform\Resource\GridConfig as Grid;
use MetaFox\Platform\Resource\ItemActionMenu;
use MetaFox\Platform\Resource\GridColumn;
use MetaFox\Platform\Resource\ActionItem;
/**
* Class DataGrid.
* @codeCoverageIgnore
* @ignore
*/
class DataGrid extends Grid
{
protected function initialize(): void
{
$this->enableCheckboxSelection(true);
$this->setSearchForm(new SearchPhraseForm());
$this->setDataSource('/admincp/phrase', ['q' => ':q','limit'=>50]);
$this->addColumn('id')
->header('ID')
->width(80);
$this->addColumn('key')
->header(__p('core::locale.key_name'))
->width(200);
$this->addColumn('namespace')
->header(__p('core::locale.namespace'))
->width(200);
$this->addColumn('group')
->header(__p('core::locale.group'))
->width(120);
$this->addColumn('package_id')
->header(__p('core::locale.module_name'))
->width(120);
$this->addColumn('text')
->header(__p('core::locale.translation'))
->flex(1);
/*
* Add default actions
*/
$this->withActions(function (Actions $actions) {
$actions->addDefaults('admincp/phrase');
});
/*
* with batch menu actions
*/
$this->withBatchMenu(function (BatchActionMenu $menu) {
$menu->asButton();
$menu->withDelete();
$menu->withCreate(__p('core::phrase.add_new_phrase'));
});
/*
* with item action menus
*/
$this->withItemMenu(function (ItemActionMenu $menu) {
$menu->withEdit();
$menu->withDelete();
});
}
}

Example Reponse from data grid api.

{
"status": "success",
"data": {
"checkboxSelection": true,
"dataSource": {
"apiUrl": "/admincp/phrase",
"apiParams": { "q": ":q", "limit": 50 }
},
"itemActionMenu": {
"variant": null,
"items": [
{
"name": "editItem",
"icon": "ico-pencil-o",
"value": "row/edit",
"label": "Edit",
"params": { "action": "editItem" }
},
{
"name": "deleteItem",
"icon": "ico-trash",
"value": "row/remove",
"label": "Delete",
"params": { "action": "deleteItem" },
"showWhen": []
}
]
},
"batchActionMenu": {
"variant": "IconLabel",
"items": [
{
"name": "deleteItem",
"icon": "ico-trash",
"value": "row/batchRemove",
"label": "Delete",
"style": "danger",
"params": { "action": "deleteItems" }
},
{
"name": "addItem",
"icon": "ico-plus",
"value": "row/add",
"label": "Add New Phrase",
"disabled": false,
"params": { "action": "addItem" }
}
]
},
"actions": {
"deleteItems": { "apiUrl": "admincp/phrase" },
"deleteItem": { "apiUrl": "admincp/phrase/:id" },
"addItem": { "apiUrl": "admincp/phrase/form" },
"editItem": { "apiUrl": "admincp/phrase/form/:id" },
"activeItem": { "apiUrl": "admincp/phrase/active/:id" }
},
"columns": [
{ "field": "id", "headerName": "ID", "width": 80 },
{ "field": "key", "headerName": "Translation Key", "width": 200 },
{ "field": "namespace", "headerName": "Namespace", "width": 200 },
{ "field": "group", "headerName": "Group", "width": 120 },
{
"field": "package_id",
"headerName": "Package",
"width": 120
},
{ "field": "text", "headerName": "Translation", "flex": 1 }
]
},
"message": null,
"error": null
}

Configuration

enableCheckboxSelection

Enable checkbox for the first item data grid.

Top