Vue Component simter-vue-table

A Vue component used to generate HTML table element.

View demo Download Source

Options:

Name___________ Require ValueType Description
columns true [{}] Define table columns
├ id false String The column's id, it's the key in the rows item
├ label true String The column's visible text
├ width false String The column's width, such as '2em'
├ children false [{}] The child group columns. id and width will be ignored if define this property
├ headerClass false String This column's thead/tr/th element class, follow Vue Class Bindings
├ headerStyle false String This column's thead/tr/th element style, follow Vue Class Bindings
├ class false String This column's tbody/tr/td element class, follow Vue Class Bindings
├ style false String This column's tbody/tr/td element style, follow Vue Class Bindings
├ cell false {}
String		 Define cell customized, String type means setting component value
│ ├ component false String The cell component's name
│ ├ classes false {} Define the cell's inner dom elements classes, keys is up to the component design
│ ├ styles false {} Define the cell's inner dom elements styles, keys is up to the component design
│ ├ ...custom false custom The custom properties for all this column's cell component. It is up to the component design
rows true [{}] The table's row data
classes false {} Define inner dom elements global classes
├ headerRow false String thead/tr class, follow Vue Class Bindings
├ headerCell false String thead/tr/td class, follow Vue Class Bindings
├ row false String tbody/tr class, follow Vue Class Bindings
├ cell false String tbody/tr/td class, follow Vue Class Bindings
├ groupRow false String group tbody/tr class, follow Vue Class Bindings
├ groupCell false String group tbody/tr/td class, follow Vue Class Bindings
├ table false String table class, follow Vue Class Bindings
├ thead false String thead class, follow Vue Class Bindings
├ tbody false String tbody class, follow Vue Class Bindings
styles false {} Define inner dom elements global styles, simular to classes prop
group false {}
String
Boolean
Function		 Define how to predicate a group row.
String type means setting id value with predicate=true.
Boolean or Function type means setting predicate value with id='group'.
├ id false String The key in the row item to get the group cell value
├ predicate false String
Function		 Generate a bool value to predicate whether this row is a group row
- String: The row item's key that to get the bool value
- Function: Call to get the bool value. It's first param is the current row data
├ indent false Boolean
String		 Predicate whether to indent children row or not. Default is true.
String type means setting a specific indent style, such as padding-left:2em
├ cell false {}
String		 The group cell component config, same as columns[i].cell
├ colspan false Number The group cell's colspan attribute value. Default behavior is to merge all the column cell
picker false {}
String
Boolean		 Define the picker column cell.
String type means setting component value.
Boolean type means whether to show a default picker cell column.
├ id false String The key in the row item to get the picked value
├ component false String The cell component's name
├ classes false {} Define the picker cell's inner dom elements classes, keys is up to the component design
├ styles false {} Define the picker cell's inner dom elements styles, keys is up to the component design
├ ...custom false custom The custom properties for this picker cell component. It is up to the component design
id false String The key in row item that use its value to unique table row identity

Develop

yarn install  // or npm install
yarn run dev  // or npm run dev

Use [parcel] to run the development debug.

Build

yarn run build  // or npm run build

Use [rollup] package the component to dist directory.

Usage

Example 1 : Simple Columns

Js:

import table from 'simter-vue-table'

new Vue({
  el: "#sample",
  data: {
    columns: [
      { id: "key1", label: "Column1", width: "61px" },
      { id: "key2", label: "Column2", width: "62px" },
      { id: "key3", label: "Column3", width: "63px" }
    ],
    rows: [
      { key1: "v1-1", key2: "v2-1", key3: "v3-1" },
      { key1: "v1-2", key2: "v2-2", key3: "v3-2" },
      { key1: "v1-3", key2: "v2-3", key3: "v3-3" }
    ]
  },
  components: {
    "st-table": table
  }
})

Html template:

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

<!--
| Column1 | Column2 | Column3 |
| v1-1    | v2-1    | v3-1    |
| v1-2    | v2-2    | v3-2    |
| v1-3    | v2-3    | v3-3    |
-->
<table>
  <colgroup>
    <col style="width: 61px">
    <col style="width: 62px">
    <col style="width: 63px">
  </colgroup>
  <thead>
    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
  </thead>
  <tbody>
    <tr><td>v1-1</td><td>v2-1</td><td>v3-1</td></tr>
    <tr><td>v1-2</td><td>v2-2</td><td>v3-2</td></tr>
    <tr><td>v1-3</td><td>v2-3</td><td>v3-3</td></tr>
  </tbody>
</table>

Example 2 : Group Columns

Use children key to define the group.

Js:

import table from 'simter-vue-table'

new Vue({
  el: "#sample",
  data: {
    columns: [
      { id: "key1", label: "Column1", width: "61px" },
      {
        label: "Column2",
        children: [
          { id: "key21", label: "Column21", width: "62px" },
          { id: "key22", label: "Column22", width: "63px" }
        ]
      }
    ],
    rows: [
      { key1: "v1-1", key21: "v2-1-1", key22: "v2-2-1" },
      { key1: "v1-2", key21: "v2-1-2", key22: "v2-2-2" },
      { key1: "v1-3", key21: "v2-1-3", key22: "v2-2-3" }
    ]
  },
  components: {
    "st-table": table
  }
})

Html template:

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

<!--
| Column1 |       Column2       |
|         | Column21 | Column22 |
| v1-1    | v21-1    | v22-1    |
| v1-2    | v21-2    | v22-2    |
| v1-3    | v21-3    | v22-3    |
--> 
<table>
  <colgroup>
    <col style="width: 61px">
    <col style="width: 62px">
    <col style="width: 63px">
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2">Column1</th>
      <th colspan="2">Column2</th>
    </tr>
    <tr>
      <th>Column21</th>
      <th>Column22</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>v1-1</td><td>v21-1</td><td>v22-1</td></tr>
    <tr><td>v1-2</td><td>v21-2</td><td>v22-2</td></tr>
    <tr><td>v1-3</td><td>v21-3</td><td>v22-3</td></tr>
  </tbody>
</table>

Example 3 : Complex Group Columns

Use children key to define any level nested group columns.

Js:

import table from 'simter-vue-table'

new Vue({
  el: "#sample",
  data: {
    columns: [
      { id: "key1", label: "Column1", width: "61px" },
      {
        label: "Column2",
        children: [
          { id: "key21", label: "Column21", width: "62px" },
          { 
            label: "Column22",
            children: [
              { id: "key221", label: "Column221", width: "63px" },
              { id: "key222", label: "Column222", width: "64px" }
            ] 
          }
        ]
      }
    ],
    rows: [
      { key1: "v1-1", key21: "v21-1", key221: "v221-1", key222: "v222-1" },
      { key1: "v1-2", key21: "v21-2", key221: "v221-2", key222: "v222-2" },
      { key1: "v1-3", key21: "v21-3", key221: "v221-3", key222: "v222-3" }
    ]
  },
  components: {
    "st-table": table
  }
})

Html template:

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

<!--
| Column1 |              Column2             |
|         | Column21 |       Column22        |
|         |          | Column221 | Column222 |
| v1-1    | v21-1    | v221-1    | v222-1    |
| v1-2    | v21-2    | v221-2    | v222-2    |
| v1-3    | v21-3    | v221-3    | v222-3    |
--> 
<table>
  <colgroup>
    <col style="width: 61px">
    <col style="width: 62px">
    <col style="width: 63px">
    <col style="width: 64px">
  </colgroup>
  <thead>
    <tr>
      <th rowspan="3">Column1</th>
      <th colspan="3">Column2</th>
    </tr>
    <tr>
      <th rowspan="2">Column21</th>
      <th colspan="2">Column22</th>
    </tr>
    <tr>
      <th>Column221</th>
      <th>Column222</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>v1-1</td><td>v21-1</td><td>v221-1</td><td>v222-1</td></tr>
    <tr><td>v1-2</td><td>v21-2</td><td>v221-2</td><td>v222-2</td></tr>
    <tr><td>v1-3</td><td>v21-3</td><td>v221-3</td><td>v222-3</td></tr>
  </tbody>
</table>

GitHub