❤
npm
Sign UpSign In

simter-vue-thead

0.4.2 • Public • Published

Vue Component simter-vue-thead

Define table's thead tag by structured data. Such as columns = ["X1", "X2"] or columns = ["X1", {label: "X2", children: ["X21", "X22"]}]. Demo or document is here.

Core properties:

Name_________ Require ValueType Description
columns true [{}] Define table columns
├ 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 The specific class for this column's header cell th element
├ headerStyle false String The specific style for this column's header cell th element
classes false {} Define component class
├ thead false String thead class, follow Vue Class Bindings
├ row false String thead/tr class, follow Vue Class Bindings
├ cell false String thead/tr/th class, follow Vue Class Bindings
styles false {} Define component style
├ thead false String thead class, follow Vue Style Bindings
├ row false String thead/tr class, follow Vue Style Bindings
├ cell false String thead/tr/th class, follow Vue Style Bindings

Develop

yarn install  // or npm install
npm run dev

Use parcel to run the development debug.

Build

npm run build

Use rollup package the component to dist directory.

Usage

Example 1 : Simple Columns

Js:

import thead from 'simter-vue-thead'
 
new Vue({
  el: "#sample",
  data: {
    columns: ["X1", "X2", "X3"]
  },
  components: {
    "st-thead": thead
  }
})

Html template:

<table id="#sample">
  <thead is="st-thead" :columns="columns"></thead>
  ...
</table>

Generated html:

| X1 | X2 | X3 |
<table>
  <thead>
    <tr>
      <th>X1</th>
      <th>X2</th>
      <th>X3</th>
    </tr>
  </thead>
  ...
</table>

Example 2 : Group Columns

Use children key to define the group.

Js:

import thead from 'simter-vue-thead'
 
new Vue({
  el: "#sample",
  data: {
    columns: [
      "X1",
      {
        label: "X2",
        children: ["X21", "X22"]
      },
      {
        label: "X3",
        children: ["X31", "X32"]
      },
    ]
  },
  components: {
    "st-thead": thead
  }
})

Html template:

<table id="#sample">
  <thead is="st-thead" :columns="columns"></thead>
  ...
</table>

Generated html:

| X1 |    X2     |    X3     |
|    | X21 | X22 | X31 | X32 |
<table>
  <thead>
    <tr>
      <th rowspan="2">X1</th>
      <th colspan="2">X2</th>
      <th colspan="2">X3</th>
    </tr>
    <tr>
      <th>X21</th>
      <th>X22</th>
      <th>X31</th>
      <th>X32</th>
    </tr>
  </thead>
  ...
</table>

Example 3 : Complex Group Columns

Use children key to define any level nested group columns.

Js:

import thead from 'simter-vue-thead'
 
new Vue({
  el: "#sample",
  data: {
    columns: [
      { label: "X1" },
      {
        label: "X2",
        children: [
          { label: "X21" },
          { label: "X22" }
        ]
      },
      { label: "X3" },
      {
        label: "X4",
        children: [
          {
            label: "X41",
            children: [
              { label: "X411" },
              { label: "X412" }
            ]
          },
          { label: "X42" }
        ]
      }
    ]
  },
  components: {
    "st-thead": thead
  }
})

Html template:

<table id="#sample">
  <thead is="st-thead" :columns="columns"></thead>
  ...
</table>

Generated html:

| X1 |    X2     | X3 |        X4         |
|    | X21 | X22 |    |     X41     | X42 |
|    |     |     |    | X411 | X412 |     |
<table>
  <thead>
    <tr>
      <th rowspan="3">X1</th>
      <th colspan="2">X2</th>
      <th rowspan="3">X3</th>
      <th colspan="3">X4</th>
    </tr>
    <tr>
      <th rowspan="2">X21</th>
      <th rowspan="2">X22</th>
      <th colspan="2">X41</th>
      <th rowspan="2">X42</th>
    </tr>
    <tr>
      <th>X411</th>
      <th>X412</th>
    </tr>
  </thead>
  ...
</table>

Readme

Keywords

Package Sidebar

Install

npm i simter-vue-thead

Repository

github.com/simter/simter-vue-thead

Homepage

github.com/simter/simter-vue-thead#readme

Weekly Downloads

1

Version

0.4.2

License

MIT

Unpacked Size

60 kB

Total Files

18

Last publish

Collaborators

  • rjhwang
Try on RunKit
Report malware