Datagrids

Datagrids are for organizing large volumes of data that users can scan, compare, and perform actions on.

Basic with Custom Cell Rendering

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{variableLengthUsers.length}} users

Sort and Filter

Name filter value: {{nameFilter}}

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{nonPaginatedUsers.length}} users

Cells with signposts, icons, and badges

User ID Name Creation date Pokemon Favorite color {{user.id}} The pokemon is strong. {{user.name}} {{user.creation | date}} {{user.pokemon.name}} #{{user.pokemon.number}} {{nonPaginatedUsers.length}} users

Paginate and hide columns with a placeholder

User ID Name Creation date Pokemon Favorite color No users found {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} The pokemon is strong. {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users

Scroll vertically and horizontally on overflow

User ID Name Pokemon Favorite color Filler {{user.id}} {{user.name}} {{user.pokemon.name}} This is a very wide column. {{nonPaginatedUsers.length}} users

Single selection and exapndable options

Selected user: No user selected. {{singleSelected.name}}

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. {{users.length}} users

Multi-select with batch actions and single row actions

Selected users: No user selected. {{user.name}}

Users to be added to group: No user selected. {{user.name}}

Users to be deleted: No user selected. {{user.name}}

User to be edited: No user selected. {{toEdit.name}}

User ID Name Creation date Favorite color {{user.id}}_non_breaking_long_text_content_here {{user.name}} {{user.creation | date}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users