Data
Defining Data Types
Table Data is an array of objects transformed into table rows. Each object represents one row by default. In TypeScript, define a type for the data shape. This type is used as a generic throughout table, column, row, and cell instances.
For example, if we have a table that displays a list of users in an array like this:
const users = [
{
firstName: "Tanner",
lastName: "Linsley",
age: 33,
visits: 100,
progress: 50,
status: "Married",
},
{
firstName: "Kevin",
lastName: "Vandy",
age: 27,
visits: 200,
progress: 100,
status: "Single",
},
]Then you'd define a User type like this:
interface User {
firstName: string
lastName: string
age: number
visits: number
progress: number
status: string
}The library infers this type throughout the table instance for columns, rows, headers, and cells. Whatever you pass to the data table option becomes the data type for the entire table. For strict mapping, pass the type into the generic parameter of the createAngularTable function:
import {createAngularTable} from "@qualcomm-ui/angular/table"
@Component({
// ...
})
export class BasicDemo {
protected table = createAngularTable<User>(() => ({
data: users,
// ...
}))
}Reactivity
Table state and data are reactive. Provide your data as a signal, and the table will automatically update when the signal changes.
interface User {
id: number
name: string
}
@Component({
// ...
})
export class ExampleComponent {
protected data = signal<User[]>([])
protected table: AngularTable<User> = createAngularTable(() => ({
columns: userColumns,
data: this.data(),
getCoreRowModel: getCoreRowModel(),
}))
updateData() {
this.data.set([{id: 1, name: "John"}])
}
}