lnz-table

Project setup

npm install --save ltc-table

or

yarn add ltc-table

Basic Usage

<template>
  <ltc-table
    name="example"
    :headers="headers"
    :content-class="contentClass"
    :data="data"
    :custom-sort="customSort"
  />
</template>
<script>
import ExcelTable from 'ltc-table'
export default {
  components: {
    ExcelTable,
  },
  data() {
    return {
      customSort: {
        name: {
          asc: (el1, el2) => {
            return el1.identifier - el2.identifier
          },
        },
      },
      contentClass: 'tableWrapper',
      headers: [
        {
          class: 'class1',
          style: 'padding: 10px;',
          columns: [
            {
              text: 'Group 1',
              colspan: 2,
              style: 'text-align:center;',
            },
            {
              text: 'Group 2',
              colspan: 2,
              style: 'text-align:center;',
            },
          ],
        },
        {
          class: 'class2',
          style: 'padding: 10px;',
          columns: [
            {
              text: 'Name',
              colspan: 1,
              value: 'name',
              sort: true,
            },
            {
              text: 'Age',
              colspan: 1,
              value: 'age',
              sort: true,
            },
            {
              text: 'Ocuppation',
              colspan: 1,
              value: 'ocuppation',
            },
            {
              text: 'City',
              colspan: 1,
              value: 'city',
            },
          ],
        },
      ],
      data: [
        {
          class: 'row1',
          name: 'Example',
          age: '26',
          ocuppation: 'Programmer',
          city: 'Lisboa',
          identifier: 7,
        },
        {
          class: 'row1',
          name: 'Example 1',
          age: '24',
          ocuppation: 'Programmer',
          city: 'Madrid',
          identifier: 1,
        },
        {
          class: 'row1',
          name: 'Example 2',
          age: '26',
          ocuppation: 'Programmer',
          city: 'París',
        },
        {
          class: 'row1',
          name: 'Example 3',
          age: '26',
          ocuppation: 'Programmer',
          city: 'Roma',
          identifier: 3,
        },
        {
          class: 'row1',
          name: 'Example 4',
          age: '26',
          ocuppation: 'Programmer',
          city: 'Berlín',
          identifier: 0,
        },
      ],
    }
  },
}
</script>

<style>
.tableWrapper {
  width: 100%;
}
</style>