Add custom component to the collection list view

Dan Sivewright

last month

Hello everyone, I was wondering if it's possible to add custom components to the collection list view. Specifically, I'd like to add a button that can fetch all documents within a collection and download them as a CSV file. I would greatly appreciate any insights or suggestions on how to achieve this. Thank you very much in advance!

jesschow
Payload Team
last month
Hi @Dan Sivewright - adding this to your collection config will allow you to overwrite the list view:
```
components: {
  views: {
    List: CustomList,
  }
}
```
And to not lose the original view, you can import the list from payload and add your custom component to it, for example:
```
import { List } from 'payload/components/views/List';

const CustomList: React.FC = (props) => (
  <>
    <p>Hello add a custom component here</p>
    <List {...props} />
  </>
);

export default CustomList;
```
Hope this helps!
Dan Sivewright
4 weeks ago
This helps a ton!!!!!

Thank you

Open the post

Continue the discussion in Discord

Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More