Kitchen sink

The purpose of this page is to contain various datagrids with fixed data so we can run css regression tests against it. Not to be published on website.

Basic with Custom Cell Rendering

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

Using smart iterator, property binding, and sorting

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

Filters and pagination

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

Single selection

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

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

Multi selection

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

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

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

Placeholder

User ID Name Creation date Favorite color We couldn't find any users! {{[].length}} users User ID Name Creation date Favorite color {{[].length}} users

Vertical scrolling

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

Horizontal scrolling

For instance when in a narrow card.
User ID Name Pokemon Favorite color Filler {{user.id}} {{user.name}} {{user.pokemon.name}} This is a very wide column. {{nonPaginatedUsers.length}} users

Smart column sizing

This column as a long header but short data Short header Large data {{user.id}} {{user.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor tellus, tincidunt eget mauris molestie, ullamcorper facilisis lacus. Vivamus sagittis suscipit libero, et tristique justo consectetur eget. {{nonPaginatedUsers.length}} users

Expandable rows

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. {{nonPaginatedUsers.length}} users

Hide-show columns

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