React-admin 更改过滤器 position

Question

This is the normal way of the filters in react-admin

but in my use case i want the filters in each column headings EX:

• Show the filters inside each column headings.
• All are text filters.

I couldn't find anything to customize into this behavior, Glad if someone can help me out

Answer 1

React-admin lib doesn't have such components, althougt is possible to write a custom one, probably with a custom DatagridHeader and DatagridHeaderCell on Datagrid component. The closer you can get with standard components is passing alwaysOn prop to Filter Inputs, with the same order of datagrid fields:

<Filter {...props}>
    <TextInput source="seller" alwaysOn/>
    <TextInput source="ticketType" alwaysOn/>
    <TextInput source="quantity" alwaysOn/>
    <TextInput source="createdAt" alwaysOn/>
</Filter>

That way filter inputs will be automically placed above the datagrid, with the same order of datagrid fields, with no need for selecting them on filter dropdown. For datagrid with more fields, you will need to make filter inputs smaller, to fit them all on a single line.