API Reference
SmartCrudPage Props
TL;DR
A configuration-driven CRUD page component that automatically generates tables, search, forms, and details based on
fieldsConfig.
๐ Minimal Example
import dynamic from 'next/dynamic'
const SmartCrudPage = dynamic(() => import('@/components/admin/smart-crud-page'), { ssr: false })
export default function Page() {
return (
<SmartCrudPage
title="Example Management"
fieldsConfig={[{ key: 'name', title: 'Name', type: 'text', search: { mode: 'like' }, form: { required: true } }]}
actions={actions}
enableCreate
/>
)
}๐ง Key Props
title:stringโ Page titlefieldsConfig:FieldConfig[]โ Field configuration (drives table/form/search)actions:{ getList, getDetail?, create?, update, delete, batchUpdate?, batchDelete? }rowKey?:string | (row) => stringโ Default'id'enableCreate / enableEdit / enableDelete / enableDetail?:booleanenableIndexColumn?:booleanโ Show global index columntableApiRef?:React.Refโ Exposesrefresh / reloadAndRest / resetSearch / submitSearch / getSelectedRowscustomToolbarButtons?:ReactNode[]customRowActions?:{ key, label, onClick, confirm?, showCondition? }[]batchActions?:{ key, label, action: (ids, params) => Promise }[]
๐ Data Requests
- Default uses
actions.getList(params); - If
dataSource + loadingprovided, enters controlled mode and no longer sends requests; - Detail drawer automatically uses
getDetail(if exists).
๐ Search and Sort
- Search form automatically generated from
fieldsConfig.search; - Sorting triggered by clicking list headers, parameters passed to actions via
buildSortCondition; baseQuerycan force additional fixed filters.
๐งช Callbacks and Extensions
beforeCreate(record)/beforeEdit(record)/beforeDelete(record)โ Returnfalseto interruptrenderDetailHeader(record)โ Custom detail headeronActionRefReady(actionRef, api)โ Callback when initially ready
๐ Related
- Field Configuration:
api/FIELDS_CONFIG - Form Component:
api/SMART_FORM - CRUD Factory:
api/CRUD_HELPER