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.

live example in codePen

Install

``bash
npm install responsive-table-dl
`

Vue Use

Global
> in your main.js

`js
import { install } from 'responsive-table-dl';
Vue.use(install);
`
Local (file.vue)
> in your script section

`js
import responsive-table-dl from 'responsive-table-dl';
`

Example

in your file.vue

`html

`
`js

`
`scss

`
> .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.


$3

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.

$3

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