vue-grid-table
Installation
npm i vue-grid-table -S
<template> <div> <vue-grid-table :data="sampleData"></vue-grid-table> </div></template> <script>import vueGridTable from 'vue-grid-table' export default { data () { return { sampleData // [{}, {}, {}, ...] // this musst be an array with objects, // the objekt keys are going to be the table headers // and values are going to be the entries in the table // this is maybe not the best data structure // and is maybe going to be changed in the future } }, components: { vueGridTable }}</script>
props:
- data:
- description: the data that should go into the table, object keys are getting used as table headers, values going into the table columns
- type: Array of objects
- notice: you have to take care that the objects in the array are uniform so the component cn work correctly
- COLUMN_MIN:
- description: minimum value a column can be resized to as a number (of pixels)
- type: Number
- notice: the number you provide is going to be seet to a pixel value
- default: 50 -> ('50px')
- HANDLE_WIDTH:
- description: the width of the resize handle in pixels
- type: String
- notice: you have to provide a string value in this form
'10px'
- default: '10px'
- LAST_CELL_MAX:
- description: this is the value that gets set as the second argument for the
minmax(COLUMN_MIN, LAST_CELL_MAX)
of the last grid-template item - type: String
- notice: this is just to make it possible to customize the behavior of the last column his prop might be unnesessary
- default: 'auto'
- description: this is the value that gets set as the second argument for the
CSS
- Theese are (most liekely) the css selectors you need to customize your table.
- modifying these or espacially other css might brake the component
/* table headers*/ /* last table header color*/ /* text color inside table */ /* color pattern effect */ /* resize handle while resizing *//* The following selector is needed so the handle is visible duringresize even if the mouse isn't over the handle anymore */ /* the one beeing resized now */ /* when hovering resizable th */