question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow to configure export button props from list component and global admin

See original GitHub issue

Is your feature request related to a problem? Please describe.

We currently need to change the default export max result from 1000 (defined here) to 5000 globally on the app.

To do so, we have first to create custom List and ListActions components:

const ListActions: FC<ListActionsProps> = ({ filters, ...props }) => {
  const {
    sort,
    filterValues,
    exporter,
    total,
  } = useListContext(props);
  const resource = useResourceContext(props);
  const { hasCreate } = useResourceDefinition(props);

  return useMemo(
    () => (
      <TopToolbar>
        <FilterButton
          filters={Array.isArray(filters) ? filters : [filters]}
        />
        {hasCreate && <CreateButton />}
        {exporter !== false && (
          <ExportButton
            disabled={total === 0}
            resource={resource}
            sort={sort}
            filterValues={filterValues}
            // The only thing we want to override is that part.
            maxResults={5000}
          />
        )}
      </TopToolbar>
    ),
    [
      exporter,
      filterValues,
      filters,
      hasCreate,
      resource,
      sort,
      total,
    ],
  );
};

export const List: FC<ListProps> = ({ children, filters, ...props }) => (
  <ListBase {...props}>
    <ListToolbar
      filters={filters}
      actions={<ListActions />}
    />
    <Card>
      {children}
      <Pagination />
    </Card>
  </ListBase>
);

Then, we have to replace the vendor List usage by our local one on each list resource we define on our project (nearly 15 for our case).

I see two main drawbacks with that:

  1. This is cumbersome. We have now 50 lines of custom component just to change one number prop.
  2. By using a custom one, we lose the benefit of simply use the provided vendor list and its furthers update because of the override.

Describe the solution you’d like

The ability to define the exporter option directly to the List:

<List
  export={{
    maxResults: 5000,
  }}
>

Or globally using the Admin component:

<Admin
  export={{
    maxResults: 5000,
  }}
>

Describe alternatives you’ve considered The alternative is already described by the problem section.

Additional context N/A

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
WiXSLcommented, Oct 22, 2022

Maybe is not a crazy idea to add maxResults as an optional prop to ListActions component and pass it to the ExporButton. So one has to pass <ListActions maxResults={5000}> to a List component

0reactions
fzaninottocommented, Oct 27, 2022

The react-admin code is more complex because we have to maintain backward compatibility with previous versions. You only have one version to manage.

Anyway, let’s agree to disagree. You want to write less code, we want to avoid complexity, and these two objectives can’t meet in this feature request. Considering that your problem already has a solution, I suggest we leave it here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

The List Component - React-admin - Marmelab
The <List> component fetches the list of records from the data provider, and renders the default list layout (title, buttons, filters, pagination).
Read more >
Configure Columns in React Admin to Export | Endertech
This article will examine how you can extend React Admin by adding a column export configuration form for data grids. Let's first understand ......
Read more >
React admin custom export button - server side - Stack Overflow
I have a react admin List that is working nicely. When I enable the exporter , it also works as expected. What I...
Read more >
Export Button · Issue #94 · marmelab/react-admin - GitHub
In the <List> view, an <Export> component should let the user download the related data: with the current filters enabled; unpaginated (i.e. ...
Read more >
Tutorial: Create a React single-page app that uses auth code ...
Add the sign-in button · Create another file in the components folder named PageLayout.jsx and add the following code to create a navbar ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found