列表页:搜索与数据表
- 使用
List包裹列表视图,传入filters支持搜索; DataTable配合DataTable.Col渲染列;
src/customers/CustomersList.tsx
import { DataTable, List, SearchInput } from "@/components/admin";
const filters = [
<SearchInput key="q" source="name_ilike" alwaysOn label={false} />,
];
export const CustomersList = () => (
<List filters={filters}>
<DataTable rowClick="edit" bulkActionButtons={false}>
<DataTable.Col source="id" />
<DataTable.Col source="name" />
<DataTable.Col source="age" />
<DataTable.Col source="email" />
<DataTable.Col source="created_at" />
</DataTable>
</List>
);
- 说明:示例中对
name提供了模糊匹配参数name_ilike,可根据后端数据服务实际查询参数调整。