# table-run

> the official table for apprun/fullfack apps

## Demo

- [JSBin example](http://jsbin.com/fixucidaxo/edit?html,js,output)

## Requirements

1. Vue 2.X.X

## Usage

1. Install from npm

    npm install table-run

  Or include in your html using the script tag
  ```html
  <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>
  ```

2. Add component in your app

  ```javascript
  import TableRun from 'table-run';
  // or require('table-run');
  // or window.TableRun if you are including in a script tag

  export default {
    components: {
      TableRun,
    },
  }

  ```

3. Create some parameters in your data object

```javascript
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,
  },
}
```

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

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

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run component
```