simter-vue-table

Vue Component simter-vue-table

A Vue component used to generate HTML <table> element.

Demo.

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>