https://github.com/malbernaz/vue-data-table
https://github.com/malbernaz/vue-data-table
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/malbernaz/vue-data-table
- Owner: malbernaz
- Created: 2018-12-13T05:28:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T20:16:04.000Z (over 6 years ago)
- Last Synced: 2025-01-12T14:47:38.341Z (4 months ago)
- Language: JavaScript
- Size: 7.12 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Data Table
## Documentation
### `DataTable`
```html
```
#### Props:
##### `defs`
The prop defs is an array of column definitions. Each column definition must have the following shape:
```ts
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;
}
```
##### `rows`
The prop rows is an array of objects withs keys for each column name.
```ts
export interface Row {
[key: string]: any;
}
const rows: Row[] = {
/*...*/
};
```
##### `onRowSelect`
The prop onRowSelect is an callback that is triggered whenever a row is clicked. It receives as paramenter the row it self.
```ts
type OnRowSelect = (row: Row) => void;
```
### `WithSearch`
```html
```
`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.