Add custom component to the collection list view

default discord avatar
Dan Sivewright
9 months 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!

  • discord user avatar
    jesschow
    Payload Team
    9 months ago

    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!

  • default discord avatar
    Dan Sivewright
    9 months ago

    This helps a ton!!!!!


    Thank you

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.