Like what we’re doing? Star us on GitHub!

Add custom component to the collection list view

Dan Sivewright
last month
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!

  • 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