跳到主要内容

列表页:搜索与数据表

  • 使用 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,可根据后端数据服务实际查询参数调整。