table-run

the official table for apprun/fullfack apps

Demo

• JSBin example

Requirements

1. Vue 2.X.X

Usage

1. Install from npm

   npm install table-run

Or include in your html using the script tag

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/table-run/dist/TableRun.css" />
<script src="https://unpkg.com/table-run/dist/TableRun.js"></script>

1. Add component in your app

import TableRun from 'table-run';
// or require('table-run');
// or window.TableRun if you are including in a script tag
 
export default {
  components: {
    TableRun,
  },
}
 

1. Create some parameters in your data object

export default {
  data: {
    columns: [
      { id: 1, name: 'Id', isSortable: { down: true, up: false } },
      { id: 2, name: 'Name', isSortable: { down: true, up: false } },
      { id: 3, name: 'Description', isSortable: { down: true, up: false } },
    ],
    rows: [
      { id: 1, name: 'Eduardo', description: 'javascript developer' },
      { id: 2, name: 'Arelis', description: 'front-end developer' },
      { id: 3, name: 'Lndn', description: 'QP person' },
    ],
  },
  components: {
    TableRun,
  },
}

1. In your template call the table-run component including one slot per row

<table-run v-bind:columns="columns" v-bind:rows="rows">
  <template slot="rows" scope="props">
    <td>{{props.row.id}}</td>
    <td>{{props.row.name}}</td>
    <td>{{props.row.description}}</td>
  </template>
</table-run>

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run component