Tabla Web y Móvil
This component can be used in web and movil screens.
You only have to do few thing to add the right styles.
The funtionallity works with display: grid
and grid-template-columns: repeat(auto-fit, minmax(20px, 1fr))
for each table's row.
Install
npm install responsive-table-dl
Vue Use
Global
in your main.js
;Vue;
Local (file.vue)
in your script section
;
Example
in your file.vue
Este es el slot del caption {{row.name}} {{row.lastName}} {{row.age}} {{row.gender}} Acciones Este es el slot del footer
<script>; { return columns: id: 1 title: 'Nombre' movil: true id: 2 title: 'Apellido' movil: false id: 3 title: 'Edad' movil: true id: 4 title: 'Sexo' movil: false id: 5 title: 'Acciones' movil: true rows: id: 1 name: 'José' lastName: 'López' age: 30 gender: 'Hombre' id: 2 name: 'Carlota' lastName: 'Mendoza' age: 3 gender: 'Mujer' id: 3 name: 'Noah' lastName: 'Dominguez' age: 6 gender: 'Hombre' id: 4 name: 'Andres' lastName: 'Segura' age: 69 gender: 'Hombre' id: 5 name: 'Ada' lastName: 'López' age: 70 gender: 'Mujer' ;} name: 'app' components: responsiveTableDl data;</script>
<style lang="scss">#app .responsive-table.table-main-container .cell1 .cell2 .cell3 .cell4 .actions </style>
.responsive-table
is the class defined out the component by the user. This class is used to modify styles inside the component.
.table-main-container
and the others below are classes inside the component. The user can change theses classes values to style the table.
Props
This table use the following props
name | type | value | rules |
---|---|---|---|
columns | Array |
[{}, {}] | Every array's item must to be an Object with TITLE key ([{ title: 'Nombre' }]). Is required movil: true or movil:false key:value in every columns' array's object. If movil: false , that column will hide in movil version. e.j [{ title: 'Nombre', movil: true }, { title: 'Edad', movil: false }] |
rows | Array |
[{}, {}] | Like columns, every array's item must to be an Object. |
break-point | Number |
any (400, 500, ...) | In this point (screen width in pixels) the table change from web to movil version or vice versa. |
Slots
Avaliable slots
name | description |
---|---|
caption | This slot is used to define a table caption. Is like a table title. see here |
row | This slot is used to define de object's properties to show as cell value. Every row is a rows' item. You can get the row's index if you need it. Is required add classes in every row's property to define the desired position in movil version. See classes cell1, cell2, cell3, cell4 and actions in example before. |
footer | This slot is used to define information about the data in the table. It Usually used for pagination or totals |