Github

Datatable

Datatables organize structured data into rows and columns with optional interactions.

Component variations

Basic Table

A simple datatable with basic columns and data

Name
Email
Status
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive

Table with Pagination

Datatable with pagination controls

Name
Email
Status
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive

Table with Pagination and Row Counts

Datatable with pagination controls and row counts

Name
Email
Status
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive
Showing 1 – 3 of 11

Expandable Table

Datatable with expandable rows for additional details

Name
Email
Status
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive

Table with actions

Datatable with actions for each row

Name
Email
Status
Actions
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive

Usage Guidelines

Import

Import the datatable component and interfaces in your module or component:

import-datatable.ts

Copy code

Basic Implementation

Here is a basic example of using the datatable component:

1. Define data

my.component.ts

Copy code

2. Implementation in template

my.component.html

Copy code

Implementation with Custom Templates

Using custom templates for dynamic cell rendering (e.g., status badges):

1. Define TemplateRef and columns in TypeScript

my.component.ts

Copy code

2. Create template and use in datatable

my.component.html

Copy code

Expandable Rows Implementation

Enable expandable rows to display additional details when a row is clicked:

1. Define expandable columns in TypeScript

my.component.ts

Copy code

2. Use expandable in template

my.component.html

Copy code

Pagination Implementation

Add pagination controls with row counters to navigate through large datasets:

1. Define pagination state in TypeScript

my.component.ts

Copy code

2. Use pagination in template

my.component.html

Copy code

Actions Implementation

Add action buttons for each row with conditional visibility and disabled states:

1. Define actions in TypeScript

my.component.ts

Copy code

2. Use actions in template

my.component.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
data
T[]
[]
Yes
Array of data objects to display in the table
columns
VdDatatableColumn[]
[]
Yes
Array of column definitions for the table
expandedColumns
VdDatatableColumn[]
[]
No
Columns to show when a row is expanded
actions
VdDatatableAction[]
[]
No
Array of action buttons to show for each row
expandable
boolean
false
No
Whether rows can be expanded to show additional details
currentPage
number
1
No
Current page number for pagination
totalPages
number
0
No
Total number of pages (if 0, pagination is hidden)
rowsPerPage
number
10
No
Number of rows to display per page
totalRows
number
0
No
Total number of rows in the dataset

Outputs

Event emitters for table interactions:

Property
Type
Description
pageChange
EventEmitter<number>
Emitted when the page changes
rowClicked
EventEmitter<T>
Emitted when a row is clicked
actionTriggered
EventEmitter<{ action: string; row: T }>
Emitted when an action button is clicked

Best Practices

When to Use

  • Use Datatable when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Datatable when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use meaningful column titles that clearly describe the data
  • Limit columns to 5-7 for optimal readability on most screens
  • Enable pagination when displaying more than 20 rows to improve performance
  • Use expandable rows for detailed information that doesn't fit in a single row
  • Provide clear action buttons with icons and tooltips
  • Sort and filter data on the client side for better user experience
  • Use custom templates for complex cell content like badges or status indicators
  • Always specify totalPages and totalRows for accurate pagination display
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the datatable features in this section

Name
Email
Status
John Doe
[email protected]
Active
Jane Smith
[email protected]
Active
Bob Johnson
[email protected]
Inactive
Showing 1 – 3 of 11

example.html

Copy code