responsive-table-dl

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

npm install responsive-table-dl

Vue Use

Global

in your main.js

import { install } from 'responsive-table-dl';
Vue.use(install);

Local (file.vue)

in your script section

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

Example

in your file.vue

<template>
  <div id="app" data-cy="app">
    <responsive-table-dl
      class="responsive-table"
      :break-point="550"
      :columns="columns"
      :rows="rows"
    >
        <template v-slot:caption><span>Este es el slot del caption</span></template>
        <template v-slot:row="{ row, index }">
            <td class="cell1">{{row.name}}</td>
            <td class="cell2">{{row.lastName}}</td>
            <td class="cell3">{{row.age}}</td>
            <td class="cell4">{{row.gender}}</td>
            <td class="actions">Acciones</td>
        </template>
        <template v-slot:footer>
            <tr>
                <td colspan="5">Este es el slot del footer</td>
            </tr>
        </template>
    </responsive-table-dl>
  </div>
</template>

<script>
import responsiveTableDl from '@/components/responsive-table-dl.vue';
 
function data() {
    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',
            },
        ],
    };
}
 
export default {
    name: 'app',
    components: {
        responsiveTableDl,
    },
    data,
};
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 
.responsive-table.table-main-container {
 
    table.wm-table-dl {
 
        tbody[data-cy="table-body"] {
 
            tr.row-table-dl {
                border-bottom: 1px solid cornflowerblue;
            }
            tr.row-table-dl:hover {
                border: 2px solid cornflowerblue;
            }
            tr.row-table-dl:nth-child(odd) {
                background-color: aliceblue !important;
            }
        }
    }
}
.cell1 {
    grid-column: 1/2;
    grid-row: 1;
}
.cell2 {
    grid-column: 1/2;
    grid-row: 2;
}
.cell3 {
    grid-column: 2/3;
    grid-row: 1;
}
.cell4 {
    grid-column: 2/3;
    grid-row: 2;
}
.actions {
    grid-column: 3/4;
    grid-row: 1;
}
</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