diff --git a/build.dev.js b/build.dev.js
index 54b7a6f..b388c32 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function parseName(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
+}
+
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@@ -140,8 +144,8 @@ const log = console.log
 
 ${js}
 
-if(!customElements.get('wc-${name.toLowerCase()}')){
-  customElements.define('wc-${name.toLowerCase()}', ${name})
+if(!customElements.get('wc-${parseName(name)}')){
+  customElements.define('wc-${parseName(name)}', ${name})
 }
 `
 }
diff --git a/build.prod.js b/build.prod.js
index a59ad27..4bdfaa8 100644
--- a/build.prod.js
+++ b/build.prod.js
@@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function parseName(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
+}
+
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@@ -149,8 +153,8 @@ function mkWCFile({ style, html, js }) {
 
 ${res.code}
 
-if(!customElements.get('wc-${name.toLowerCase()}')){
-  customElements.define('wc-${name.toLowerCase()}', ${name})
+if(!customElements.get('wc-${parseName(name)}')){
+  customElements.define('wc-${parseName(name)}', ${name})
 }
 `
 }
diff --git a/src/table/index.wc b/src/table/index.wc
new file mode 100644
index 0000000..3ce7af9
--- /dev/null
+++ b/src/table/index.wc
@@ -0,0 +1,98 @@
+<template>
+  <div class="table"></div>
+</template>
+
+<style lang="scss">
+.table {
+  display: flex;
+
+  li {
+    display: flex;
+  }
+  section {
+    margin: 0 2px;
+  }
+}
+ul,
+li {
+  list-style: none;
+}
+</style>
+
+<script>
+// import './item'
+
+export default class Table {
+  props = {
+    list: null
+  }
+
+  __init__() {
+    /* render */
+    this.__OUTER__ = this.root.children[1]
+  }
+
+  __updateTable__() {
+    if (this._clear) {
+      delete this._clear
+      return
+    }
+    log('-----------')
+    var { list } = this.props
+    var items = Array.from(this.children)
+      .filter(it => it.tagName === 'WC-TABLE-ITEM')
+      .map(it => {
+        return {
+          label: it.getAttribute('label'),
+          prop: it.getAttribute('prop')
+        }
+      })
+    this._clear = true
+    this.innerText = ''
+    if (list) {
+      this.__OUTER__.innerHTML =
+        '<ul>' +
+        list
+          .map((it, i) => {
+            return (
+              '<li>' +
+              items
+                .map(_ => {
+                  return `<section>${it[_.prop]}</section>`
+                })
+                .join('') +
+              '</li>'
+            )
+          })
+          .join('') +
+        '</ul>'
+    }
+  }
+
+  mounted() {
+    this.__observer = new MutationObserver(_ => this.__updateTable__())
+    this.__observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
+  }
+
+  watch() {
+    switch (name) {
+      case 'list':
+        if (val) {
+          log('===========')
+          try {
+            this.props.list = JSON.parse(val)
+          } catch (err) {}
+          this.removeAttribute('options')
+        }
+        break
+
+      default:
+        break
+    }
+  }
+}
+</script>
diff --git a/src/table/item.wc b/src/table/item.wc
new file mode 100644
index 0000000..3edc94d
--- /dev/null
+++ b/src/table/item.wc
@@ -0,0 +1,21 @@
+<template>
+  <div><slot /></div>
+</template>
+
+<style lang="scss">
+div {
+  color: #f30;
+}
+</style>
+
+<script>
+export default class TableItem {
+  props = {
+    foo: ''
+  }
+
+  __init__() {
+    /* render */
+  }
+}
+</script>