Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/debdut/vue-data-table
Vue Data Table With Filter, Sort and Complete Editability
https://github.com/debdut/vue-data-table
component editable editable-table filter javascript pug sort table vue
Last synced: about 22 hours ago
JSON representation
Vue Data Table With Filter, Sort and Complete Editability
- Host: GitHub
- URL: https://github.com/debdut/vue-data-table
- Owner: Debdut
- Created: 2018-09-21T05:52:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T09:33:06.000Z (almost 2 years ago)
- Last Synced: 2023-02-28T19:17:06.889Z (over 1 year ago)
- Topics: component, editable, editable-table, filter, javascript, pug, sort, table, vue
- Language: Vue
- Homepage:
- Size: 971 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-data-table
## Data
### Object Form
```html
```
```js
header = ['name', 'age', 'job']
body = [
['debdut', 21, 'NA'],
['saikat', 20, 'NA'],
]
```
```ts
header: Array
body: Array
data: { Array, Array }
```
| name | age | job |
|--------|-----|-----|
| debdut | 21 | NA |
| saikat | 20 | NA |
### Array Form
```html
```
```js
data = [
{name: 'debdut', age: 21, job: 'NA'},
{name: 'saikat', age: 20, job: 'NA'}
]
```
```ts
data: Array
```
| name | age | job |
|--------|-----|-----|
| debdut | 21 | NA |
| saikat | 20 | NA |
## Options
```ts
options: {
edit: Boolean
sort: Boolean
compare: (a : T, b : T) => T
removeRow: Boolean
removeColumn: Boolean
addRow: Boolean
addColumn: Boolean
filter: Boolean
filterStrategy: (search: String, a : T, list: ) => Boolean
tableStyle: String | Object
tableClass: String
headerStyle: String | Object
headerClass: String
column: Array<{
edit: Boolean
sort: Boolean
compare: (a: T, b: T) => T
remove: Boolean
textSize: Number
type: String
filter: Boolean
filterStrategy: (search: String, a : T, list: ) => Boolean
colStyle: String | Object
colClass: String
}>
row: Array<{
edit: Boolean
remove: Boolean
rowStyle: String | Object
rowClass: String
}>
cell: Array>
}
```
### Table Options
| Option | Type | Default | Choices | Description |
|----------------|---------------------|---------|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| edit | Boolean | false | false true | If True, the table cells are editable, on click turns the cell into a input with present value |
| sort | Boolean | false | false true | If True,all the table columns are sortable according to their values |
| compare | function | | | The columns are sortable according to their values using the provided compare algorithm |
| removeRow | Boolean | false | false true | If True,all rows are romovable.Specific rows can be removed,and will not be shown anymore |
| removeColumn | Boolean | false | false true | If True,,all columns are removable.Specific columns can be removed,and will not be shown anymore |
| addRow | Boolean | false | false true | If True,rows can be added,and will be shown along with the previous rows |
| addColumn | Boolean | false | false true | If True,columns can be added,and will be shown along with the previous columns |
| filter | Boolean | false | false true | If true, a row will be added in the top with input feilds of the same numbers as of the number of cells in header.Each input feilds will take a value and will match it with all the values in the column and will finally show the values or value that matches it |
| filterStrategy | function | | | Each input feilds will take a value and will be matched with the values in the column using the specific strategy and will finally show the values or value that matches it |
| tableStyle | String Object(JSS) | | | The passed css will be binded to the whole table itself |
| tableClass | String | | | The passed class will get binded to the whole table itself |
| headerStyle | String Object(JSS) | | | The passed css will be binded to the whole header itself |
| headerClass | String | | | The passed class will get binded to the whole header itself z |
### Row Options
| Option | Type | Default | Choices | Description |
|----------|--------------------|---------|-------------|----------------------------------------------------------------------------------------------------------------------|
| edit | Boolean | inherit | false true | If True, the table cells in the specific rows are editable, on click turns the cell into a input with present value |
| remove | Boolean | false | false true | If True,the row can be removed,and will not be shown anymore |
| rowStyle | String Object(JSS) | | | The passed css will be binded to the whole row itself |
| rowClass | String | | | The passed class will be binded to the whole row itself |
### Column Options
| Option | Type | Default | Choices | Description |
|----------------|--------------------|----------|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| edit | Boolean | inherit | false true | If True, the table cells in the specific columns are editable, on click turns the cell into a input with present value |
| sort | Boolean | false | false true | If True,the specific columns are sortable according to their values |
| compare | function | | | The specific columns are sortable according to their values using the provided compare algorithm |
| remove | Boolean | false | false true | If True,the column can be removed,and will not be shown anymore |
| textSize | Number | Infinity | | This specifies the maximum text size allowed in every cells of the column |
| type | String | 'string' | 'string' 'number' | This specifies the data type of the values in every cell of the column |
| filter | Boolean | false | false true | If true, a cell will be added in the top of the column with an input feild. The input feilds will take a value and will match it with all the values in the column and will finally show the values or value that matches it |
| filterStrategy | function | | | The input feild will take a value and will be matched with the values in the column using the specific strategy and will finally show the values or value that matches it |
| colStyle | String Object(JSS) | | | The passed css will be binded to the whole column itself |
| colClass | String | | | The passed class will be binded to the whole column itself |
### Cell Options
| Option | Type | Default | Choices | Description |
|-----------|--------------------|---------|-------------|----------------------------------------------------------------------------------------------------|
| edit | Boolean | inherit | false true | If True, the particular cell is editable, on click turns the cell into a input with present value |
| cellStyle | String Object(JSS) | | | The passed css will be binded to the particular cell itself |
| cellClass | String | | | The passed class will be binded to the particular cell itself |
## Events
| Event | Triggered Event | Generating Position | Description |
|-------|-----------------|----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| click | | cell | On click the cell turns into a input with present value and focus |
| click | | sort icons beside header cell | The table's rows get sorted according to the values of the respective column |
| wheel | | scroll on any position on the body of the table except header | On scrolling upwards, the rows on the present table will shift downward and new datas will appear coming from the top untill the first row appear. On scrolling downwards, the rows on the present table will shift upward and new datas will appear coming from the down untill the last row appear. |
| hover | | cell | A floating box will appear at the top and side of the respective column and row with the icons of delete,add before and add after |
| click | | delete icon beside header cell | The specific column will get deleated from the present table |
| click | | delete icon at the end of each row | The specific row will get deleated from the present table |
| click | | add icons beside header cell | A column will get added before or after the present column |
| click | | add icons at the end of each row | A row will get added before or after the present row |
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Lints and fixes files
```
yarn run lint
```