<DataTable :defs="defs" :rows="items" :onRowSelect="handleRowSelect" />The prop defs is an array of column definitions. Each column definition must have the following shape:
export interface ColumnDef {
// the column name
name: string;
// whether the column should be displayed
display?: boolean;
// left or right (default: left)
align?: string;
// the column width
width?: string;
// a function that describes how the columns should be sorted
compare?: (a: any, b: any) => number;
// how the column field should be displayed
transform?: (data: any) => string;
}The prop rows is an array of objects withs keys for each column name.
export interface Row {
[key: string]: any;
}
const rows: Row[] = {
/*...*/
};The prop onRowSelect is an callback that is triggered whenever a row is clicked. It receives as paramenter the row it self.
type OnRowSelect = (row: Row) => void;<WithSearch :defs="defs" :rows="items" :onRowSelect="handleRowSelect" defaultFilter="name">
<DataTable slot-scope="tableProps" v-bind="tableProps"/>
</WithSearch>WithSearch is a wrapper for DataTable. It receives the same props and pass then along through slot-scope. In addition to that it receives a defaultFilter prop which correspond to a column name.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent