Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Add custom component to the collection list view

default discord avatar
dansivewright2 years ago
2

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!

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @608406543058206813

    - 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!

  • default discord avatar
    dansivewright2 years ago

    This helps a ton!!!!!


    Thank you

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.