Add custom component to the collection list view

Dan Sivewright

9 months ago

2

• 

  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!

• 

  Dan Sivewright

  9 months ago

  This helps a ton!!!!!

  
  

  Thank you