CODEWITHSUNDEEP
reactjsdatagridadmin-on-rest
Thomas Ebert
Thomas Ebert

Reputation: 441

Is it possible to have conditional columns in a List/DataGrid in Admin on REST?

If I apply a filter in a List component in Admin on REST, I want to only show the filtered column (TextField) once this specific filter is selected, because the filter is fuzzy and I want to see the different results at a glance. But when no filter is set, the column is supposed to be hidden.

I implemented it like this so far.

const ConditionalFilterTextField = (props) => {
    const show = ... // if filter is set in URL
    return (show) ? <TextField {...props} /> : null
}

...

<List {...props} filters={<MyFilter />}>
  <Datagrid>
    ...
    <ConditionalFilterTextField sortable={false} source="filter_field" label="My Label" />
    ...
  </Datagrid>
</List>

This does work in a way, but then again not really. It shows the label of the column and an empty space when I return null (when the filter is not set and the column is supposed to be hidden).

How can I control visibility of a TextField depending on whether a filter is set or not? How can I force a rerender of the List when I want to add a column?

Edit:

This is similar to your answer, @Gildas, but doesn't work for me. Some detail might be wrong?

in itemList.js

class ItemList extends Component {
  render() {
    const props = this.props
    // Find out if current filter is source of field.
    const filter = props.itemsFilters
    const showFieldA = (filter && filter.fieldA) ? true : false

    return <List {...props} filters={<ItemsFilter />} perPage={50}>
      <Datagrid>
        <ReferenceField sortable={false} source="id" reference="items" linkType="show">
          <TextField source="fieldB" />
        </ReferenceField>
        <TextField sortable={false} source="fieldC" />
        <TextField sortable={false} source="fieldD" />
        <DateField sortable={false} source="fieldE" />
        { (showFieldA === true) ? <TextField sortable={false} source="fieldA" /> : null }
        <ShowButton />
        <EditButton />
      </Datagrid>
    </List>
  }
}

const ItemsFilter = (props) => (
  <Filter {...props}>
    <TextInput label="FilterSearch" source="q" />
    <TextInput label="FilterA" source="fieldA" />
  </Filter>
)

function mapStateToProps(state) {
  return {
    itemsFilters: state.admin.resources.items.list.params.filter
  }
}

export default connect(mapStateToProps)(ItemList)

... in App.js

<Resource name="items" list={ItemList} show={ItemShow} edit={ItemEdit} />

Upvotes: 2

Views: 3055

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

const MyList = (props) => {
    const show = ... // if filter is set in URL

    return (
        <List {...props} filters={<MyFilter />}>
            <Datagrid>
                ...
                {show ? <TextField {...props} /> : null}
                ...
            </Datagrid>
        </List>
    );
}

Upvotes: 2

Related Questions