refactor(data-table): new theme

2025-01-06 12:17:13 +08:00 · 2021-01-02 18:14:29 +08:00 · 2021-01-02 18:14:29 +08:00 · 42ea0c76e0
commit 42ea0c76e0
parent a8eb0eeaef
15 changed files with 581 additions and 597 deletions
--- a/src/data-table/src/DataTable.vue
+++ b/src/data-table/src/DataTable.vue
@ -2,14 +2,14 @@
  <div
    class="n-data-table"
    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme,
      'n-data-table--bordered': bordered,
      'n-data-table--single-line': singleLine,
      'n-data-table--single-column': singleColumn,
      [`n-data-table--${size}-size`]: true
    }"
+    :style="cssVars"
  >
-    <n-spin :show="loading" :theme="mergedTheme">
+    <n-spin :show="loading" :theme="'light'">
      <div class="n-data-table-wrapper">
        <base-table
          ref="mainTableRef"
@ -30,13 +30,13 @@
              'n-data-table-empty--hide': loading
            }"
          >
-            <n-empty :theme="mergedTheme" />
+            <n-empty :theme="'light'" />
          </div>
        </base-table>
      </div>
      <div v-if="pagination" class="n-data-table__pagination">
        <n-pagination
-          :theme="mergedTheme"
+          :theme="'light'"
          :page="mergedPagination.page"
          :page-count="mergedPagination.pageCount"
          :page-size="mergedPagination.pageSize"
@ -54,16 +54,17 @@
 </template>

 <script>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { nextFrame } from 'seemly'
-import { configurable, themeable, withCssr, locale } from '../../_mixins'
-import { setCheckStatusOfRow, createRowKey } from './utils'
+import { isPlainObject } from 'lodash-es'
+import { locale, useTheme } from '../../_mixins'
 import BaseTable from './BaseTable.vue'
 import { NEmpty } from '../../empty'
 import { NPagination } from '../../pagination'
-import { isPlainObject } from 'lodash-es'
-import styles from './styles'
-import { warn, call, formatLength } from '../../_utils'
+import { warn, call, formatLength, createKey } from '../../_utils'
+import { dataTableLight } from '../styles'
+import { setCheckStatusOfRow, createRowKey } from './utils'
+import style from './styles/index.cssr.js'

 function createShallowClonedObject (object) {
  if (!object) return object
@ -124,7 +125,7 @@ export default {
    NEmpty,
    NPagination
  },
-  mixins: [configurable, themeable, withCssr(styles), locale('DataTable')],
+  mixins: [locale('DataTable')],
  provide () {
    return {
      NDataTable: this
@ -292,9 +293,71 @@ export default {
      default: undefined
    }
  },
-  setup () {
+  setup (props) {
+    const themeRef = useTheme(
+      'DataTable',
+      'DataTable',
+      style,
+      dataTableLight,
+      props
+    )
    return {
-      mainTableRef: ref(null)
+      mainTableRef: ref(null),
+      cssVars: computed(() => {
+        const { size } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            borderColor,
+            tdColorHover,
+            thColor,
+            thColorHover,
+            tdColor,
+            tdTextColor,
+            thTextColor,
+            thFontWeight,
+            thButtonColorHover,
+            thIconColor,
+            thIconColorActive,
+            filterSize,
+            borderRadius,
+            lineHeight,
+            tdColorModal,
+            thColorModal,
+            borderColorModal,
+            thColorHoverModal,
+            tdColorHoverModal,
+            [createKey('fontSize', size)]: fontSize,
+            [createKey('thPadding', size)]: thPadding,
+            [createKey('tdPadding', size)]: tdPadding
+          }
+        } = themeRef.value
+        return {
+          '--font-size': fontSize,
+          '--th-padding': thPadding,
+          '--td-padding': tdPadding,
+          '--bezier': cubicBezierEaseInOut,
+          '--border-radius': borderRadius,
+          '--line-height': lineHeight,
+          '--border-color': borderColor,
+          '--border-color-modal': borderColorModal,
+          '--th-color': thColor,
+          '--th-color-hover': thColorHover,
+          '--th-color-modal': thColorModal,
+          '--th-color-hover-modal': thColorHoverModal,
+          '--td-color': tdColor,
+          '--td-color-hover': tdColorHover,
+          '--td-color-modal': tdColorModal,
+          '--td-color-hover-modal': tdColorHoverModal,
+          '--th-text-color': thTextColor,
+          '--td-text-color': tdTextColor,
+          '--th-font-weight': thFontWeight,
+          '--th-button-color-hover': thButtonColorHover,
+          '--th-icon-color': thIconColor,
+          '--th-icon-color-active': thIconColorActive,
+          '--filter-size': filterSize
+        }
+      })
    }
  },
  data () {
--- a/src/data-table/src/HeaderButton/FilterButton.vue
+++ b/src/data-table/src/HeaderButton/FilterButton.vue
@ -2,7 +2,7 @@
  <n-popover
    v-model:show="showPopover"
    trigger="click"
-    :theme="NDataTable.mergedTheme"
+    :theme="'light'"
    :padded="false"
  >
    <template #trigger>
@ -11,7 +11,7 @@
        :render="mergedRenderFilter"
        :active="active"
        :show="showPopover"
-        :theme="NDataTable.mergedTheme"
+        :theme="'light'"
        @click.stop
      />
      <div
--- a/src/data-table/src/HeaderButton/FilterMenu.vue
+++ b/src/data-table/src/HeaderButton/FilterMenu.vue
@ -7,7 +7,7 @@
    >
      <n-checkbox-group
        v-if="multiple"
-        :theme="theme"
+        :theme="'light'"
        :value="cachedValue"
        class="n-data-table-filter-menu__group"
        @update:value="handleChange"
@ -22,7 +22,7 @@
      </n-checkbox-group>
      <n-radio-group
        v-else
-        :theme="theme"
+        :theme="'light'"
        :name="radioGroupName"
        class="n-data-table-filter-menu__group"
        :value="radioGroupValue"
@ -37,13 +37,13 @@
        </n-radio>
      </n-radio-group>
    </n-scrollbar>
-    <n-divider :theme="theme" />
+    <n-divider :theme="'light'" />
    <div class="n-data-table-filter-menu__action">
-      <n-button size="tiny" :theme="theme" @click="handleCancelClick">
+      <n-button size="tiny" :theme="'light'" @click="handleCancelClick">
        {{ NDataTable.locale.clear }}
      </n-button>
      <n-button
-        :theme="theme"
+        :theme="'light'"
        type="primary"
        size="tiny"
        @click="handleConfirmClick"
@ -131,9 +131,6 @@ export default {
    }
  },
  computed: {
-    theme () {
-      return this.NDataTable.mergedTheme
-    },
    radioGroupValue () {
      const cachedValue = this.cachedValue
      if (this.multiple || shouldUseArrayInSingleMode(this.column)) {
--- a/src/data-table/src/HeaderButton/RenderFilter.js
+++ b/src/data-table/src/HeaderButton/RenderFilter.js
@ -12,10 +12,6 @@ export default {
    show: {
      type: Boolean,
      default: false
-    },
-    theme: {
-      type: String,
-      default: undefined
    }
  },
  render () {
--- a/src/data-table/src/HeaderButton/RenderSorter.js
+++ b/src/data-table/src/HeaderButton/RenderSorter.js
@ -13,10 +13,6 @@ export default {
      // asc, desc
      type: [String, Boolean],
      default: undefined
-    },
-    theme: {
-      type: String,
-      default: undefined
    }
  },
  render () {
--- a/src/data-table/src/HeaderButton/SortButton.vue
+++ b/src/data-table/src/HeaderButton/SortButton.vue
@ -4,7 +4,7 @@
    :render="mergedRenderSorter"
    :order="mergedSortOrder"
    :active="active"
-    :theme="NDataTable.mergedTheme"
+    :theme="'light'"
  />
  <span
    v-else
--- a/src/data-table/src/TableParts/Body.vue
+++ b/src/data-table/src/TableParts/Body.vue
@ -2,7 +2,7 @@
  <n-scrollbar
    ref="scrollbarRef"
    class="n-data-table-base-table-body"
-    :theme="NDataTable.mergedTheme"
+    :theme="'light'"
    :content-style="{
      minWidth: formatedScrollX
    }"
--- a/src/data-table/src/TableParts/Header.vue
+++ b/src/data-table/src/TableParts/Header.vue
@ -1,11 +1,5 @@
 <template>
-  <div
-    :class="{
-      [`n-${theme}-theme`]: theme
-    }"
-    :style="headerStyle"
-    class="n-data-table-base-table-header"
-  >
+  <div :style="headerStyle" class="n-data-table-base-table-header">
    <table
      ref="body"
      class="n-data-table-table"
@ -164,9 +158,6 @@ export default {
    currentPage () {
      return (this.pagination && this.pagination.page) || null
    },
-    theme () {
-      return this.NDataTable.mergedTheme
-    },
    checkboxIndererminate () {
      return this.NDataTable.someRowsChecked
    },
--- a/src/data-table/src/styles/index.cssr.js
+++ b/src/data-table/src/styles/index.cssr.js
@ -0,0 +1,460 @@
+import { c, cB, cE, cM, cNotM, insideModal } from '../../../_utils/cssr'
+
+const fixedColumnStyle = createFixedColumnStyle()
+
+// vars:
+// --font-size
+// --th-padding
+// --td-padding
+// --bezier
+// --border-radius
+// --line-height
+// --border-color
+// --border-color-modal
+// --th-color
+// --th-color-hover
+// --th-color-modal
+// --th-color-hover-modal
+// --td-color
+// --td-color-hover
+// --td-color-modal
+// --td-color-hover-modal
+// --th-text-color
+// --td-text-color
+// --th-font-weight
+// --th-button-color-hover
+// --th-icon-color
+// --th-icon-color-active
+// --filter-size
+export default c([
+  cB('data-table', {
+    width: '100%',
+    fontSize: 'var(--font-size)'
+  }, [
+    cB('data-table-th', {
+      padding: 'var(--th-padding)'
+    }),
+    cB('data-table-td', {
+      padding: 'var(--td-padding)'
+    }),
+    cB('data-table-empty', `
+      margin: 16px 0 14px 0;
+      flex-grow: 1;
+      flex-shrink: 0;
+      opacity: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity .3s var(--bezier);
+    `, [
+      cM('hide', {
+        opacity: 0
+      })
+    ]),
+    cE('pagination', `
+      margin-top: 12px;
+      display: flex;
+      justify-content: flex-end;
+    `),
+    cB('data-table-wrapper', `
+      position: relative;
+      transition: border-color .3s var(--bezier);
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+      overflow: hidden;
+      line-height: var(--line-height);
+    `),
+    cM('single-column', [
+      cB('data-table-wrapper', [
+        cB('data-table-table', [
+          cB('data-table-tr', [
+            cB('data-table-td', {
+              borderBottom: '0 solid var(--border-color)'
+            }, [
+              c('&::after, &::before', {
+                bottom: '0 !important'
+              })
+            ])
+          ])
+        ])
+      ])
+    ]),
+    cNotM('single-line', [
+      cB('data-table-wrapper', [
+        cB('data-table-table', [
+          cB('data-table-th', {
+            borderRight: '1px solid var(--border-color)'
+          }, [
+            cB('&:last-child', {
+              borderRight: '0 solid var(--border-color)'
+            })
+          ]),
+          cB('data-table-td', {
+            borderRight: '1px solid var(--border-color)'
+          }, [
+            cB('&:last-child', {
+              borderRight: '0 solid var(--border-color)'
+            })
+          ])
+        ])
+      ])
+    ]),
+    cM('bordered', [
+      cB('data-table-wrapper', {
+        overflow: 'hidden',
+        border: '1px solid var(--border-color)',
+        borderBottomLeftRadius: 'var(--border-radius)',
+        borderBottomRightRadius: 'var(--border-radius)'
+      }, [
+        cB('data-table-table', [
+          cB('data-table-tr', [
+            c('&:last-child', [
+              cB('data-table-td', {
+                borderBottom: '0 solid var(--border-color)'
+              })
+            ])
+          ])
+        ])
+      ])
+    ]),
+    cB('data-table-base-table', [
+      cB('scrollbar', [
+        cB('scrollbar-content', {
+          overflow: 'visible'
+        })
+      ])
+    ]),
+    cB('data-table-table', `
+      font-variant-numeric: tabular-nums;
+      width: 100%;
+      word-wrap: break-word;
+      word-break: break-all;
+      table-layout: fixed;
+      transition: background-color .3s var(--bezier);
+      border-collapse: separate;
+      border-spacing: 0;
+      background-color: var(--td-color)
+    `, [
+      cB('data-table-thead', {
+        transition: 'background-color .3s var(--bezier)',
+        backgroundColor: 'var(--th-color)'
+      }),
+      cB('data-table-tr', {
+        boxSizing: 'border-box',
+        backgroundClip: 'padding-box',
+        transition: 'background-color .3s var(--bezier)'
+      }, [
+        c('&:last-child', [
+          cB('data-table-td', [
+            c('&::after', {
+              bottom: '0 !important'
+            }),
+            c('&::before', {
+              bottom: '0 !important'
+            })
+          ])
+        ]),
+        c('&:hover', {
+          backgroundColor: 'var(--td-color-hover)'
+        }, [
+          cB('data-table-td', {
+            backgroundColor: 'var(--td-color-hover)'
+          })
+        ])
+      ]),
+      cB('data-table-th', {
+        position: 'relative',
+        textAlign: 'start',
+        boxSizing: 'border-box',
+        backgroundColor: 'var(--th-color)',
+        borderColor: 'var(--border-color)',
+        color: 'var(--th-text-color)',
+        transition: `
+          border-color .3s var(--bezier),
+          color .3s var(--bezier),
+          background-color .3s var(--bezier);
+        `,
+        fontWeight: 'var(--th-font-weight)'
+      }, [
+        cM('filterable', {
+          paddingRight: '36px'
+        }),
+        cM('selection', {
+          lineHeight: 0
+        }),
+        cM('ellipsis', `
+          display: inline-block;
+          vertical-align: middle;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 100%;
+        `),
+        cM('sortable', {
+          cursor: 'pointer'
+        }, [
+          cE('ellipsis', {
+            maxWidth: 'calc(100% - 18px)'
+          }),
+          c('&:hover', {
+            backgroundColor: 'var(--th-color-hover)'
+          })
+        ]),
+        fixedColumnStyle
+      ]),
+      cB('data-table-td', `
+        text-align: start;
+        box-sizing: border-box;
+        border: none;
+        background-color: var(--td-color);
+        color: var(--td-text-color);
+        border-bottom: 1px solid var(--border-color);
+        transition:
+          box-shadow .3s var(--bezier),
+          background-color .3s var(--bezier),
+          border-color .3s var(--bezier),
+          color .3s var(--bezier);
+      `, [
+        cM('ellipsis', `
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        `),
+        cM('selection', {
+          lineHeight: 0
+        }),
+        fixedColumnStyle
+      ])
+    ]),
+    cB('data-table-base-table-header', {
+      flexShrink: 0,
+      transition: 'border-color .3s var(--bezier)',
+      scrollbarWidth: 'none'
+    }, [
+      c('&::-webkit-scrollbar', {
+        width: 0,
+        height: 0
+      }),
+      cB('data-table-table', {
+        borderBottom: '1px solid var(--border-color)',
+        transition: 'border-color .3s var(--bezier)'
+      }),
+      cB('data-table-th', [
+        cB('data-table-sorter', {
+          height: '14px',
+          width: '14px',
+          marginLeft: '4px',
+          position: 'relative',
+          display: 'inline-flex',
+          verticalAlign: '-0.2em',
+          color: 'var(--th-icon-color)',
+          transition: `
+            transform .3s var(--bezier),
+            color .3s var(--bezier)
+          `
+        }, [
+          cM('desc', {
+            transform: 'rotate(0)'
+          }),
+          cM('asc', {
+            transform: 'rotate(-180deg)'
+          }),
+          cM('asc, desc', {
+            color: 'var(--th-icon-color-active)'
+          })
+        ]),
+        cB('data-table-filter', `
+          position: absolute;
+          z-index: auto;
+          right: 0;
+          width: 36px;
+          top: 0;
+          bottom: 0;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transition: background-color .3s var(--bezier);
+        `, [
+          c('&:hover', {
+            backgroundColor: 'var(--th-button-color-hover)'
+          }),
+          cB('icon', {
+            fontSize: 'var(--filter-size)',
+            color: 'var(--th-icon-color)',
+            transition: 'color .3s var(--bezier)'
+          }),
+          cM('show', {
+            backgroundColor: 'var(--th-button-color-hover)'
+          }),
+          cM('active', {
+            backgroundColor: 'var(--th-button-color-hover)'
+          }, [
+            cB('icon', {
+              color: 'var(--th-icon-color-active)'
+            })
+          ])
+        ])
+      ])
+    ])
+  ]),
+  cB('data-table-filter-menu', [
+    cB('scrollbar', {
+      maxHeight: '240px'
+    }),
+    cE('group', {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '12px 12px 0 12px'
+    }, [
+      cB('checkbox', {
+        marginBottom: '12px',
+        marginRight: 0
+      }),
+      cB('radio', {
+        marginBottom: '12px',
+        marginRight: 0
+      })
+    ]),
+    cE('action', {
+      padding: '8px 12px',
+      display: 'flex',
+      flexWrap: 'nowrap',
+      justifyContent: 'space-evenly'
+    }, [
+      cB('button', [
+        c('&:not(:last-child)', {
+          marginRight: '8px'
+        })
+      ])
+    ]),
+    cB('divider', {
+      margin: '0!important'
+    })
+  ]),
+  createStyleInsideModal()
+])
+
+function createStyleInsideModal () {
+  return insideModal(cB('data-table', [
+    cB('data-table-table', {
+      backgroundColor: 'var(--td-color-modal)'
+    }, [
+      cB('data-table-thead', {
+        backgroundColor: 'var(--th-color-modal)'
+      }),
+      cB('data-table-th', {
+        borderColor: 'var(--border-color-modal)',
+        backgroundColor: 'var(--th-color-modal)'
+      }, [
+        cM('sortable', [
+          c('&:hover', {
+            backgroundColor: 'var(--th-color-hover-modal)'
+          })
+        ])
+      ]),
+      cB('data-table-tr', [
+        c('&:hover', {
+          backgroundColor: 'var(--td-color-hover-modal)'
+        }, [
+          cB('data-table-td', {
+            backgroundColor: 'var(--td-color-hover-modal)'
+          })
+        ])
+      ]),
+      cB('data-table-td', {
+        borderColor: 'var(--border-color-modal)',
+        backgroundColor: 'var(--td-color-modal)'
+      })
+    ]),
+    cNotM('single-line', [
+      cB('data-table-wrapper', [
+        cB('data-table-table', [
+          cB('data-table-th', {
+            borderRight: '1px solid var(--border-color-modal)'
+          }, [
+            c('&:last-child', {
+              borderRight: '0 solid var(--border-color-modal)'
+            })
+          ]),
+          cB('data-table-td', {
+            borderRight: '1px solid var(--border-color-modal)'
+          }, [
+            c('&:last-child', {
+              borderRight: '0 solid var(--border-color-modal)'
+            })
+          ])
+        ])
+      ])
+    ]),
+    cM('bordered', [
+      cB('data-table-wrapper', {
+        border: '1px solid var(--border-color-modal)'
+      }, [
+        cB('data-table-table', [
+          cB('data-table-tr', [
+            c('&:last-child', [
+              cB('data-table-td', {
+                borderBottom: '0 solid var(--border-color-modal)'
+              })
+            ])
+          ])
+        ])
+      ])
+    ]),
+    cB('data-table-base-table-header', [
+      cB('data-table-table', {
+        borderBottom: '1px solid var(--border-color-modal)'
+      })
+    ])
+  ]))
+}
+
+function createFixedColumnStyle () {
+  return [
+    cM('fixed-left', {
+      left: 0,
+      position: 'sticky',
+      zIndex: 2
+    }, [
+      c('&::after', `
+        pointer-events: none;
+        content: "";
+        width: 36px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        transition: box-shadow .2s var(--bezier);
+        right: -36px;
+      `)
+    ]),
+    cM('fixed-right', {
+      right: 0,
+      position: 'sticky',
+      zIndex: 1
+    }, [
+      c('&::before', `
+        pointer-events: none;
+        content: "";
+        width: 36px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        transition: box-shadow .2s var(--bezier);
+        left: -36px;
+      `)
+    ]),
+    cM('shadow-before', [
+      c('&::before', {
+        boxShadow: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)'
+      })
+    ]),
+    cM('shadow-after', [
+      c('&::after', {
+        boxShadow: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)'
+      })
+    ])
+  ]
+}
--- a/src/data-table/src/styles/index.js
+++ b/src/data-table/src/styles/index.js
@ -1,9 +0,0 @@
-import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: themedBaseStyle
-  }
-]
--- a/src/data-table/src/styles/themed-base.cssr.js
+++ b/src/data-table/src/styles/themed-base.cssr.js
@ -1,506 +0,0 @@
-import { c, cTB, cB, cE, cM, cNotM, insideModal, createKey } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: { cubicBezierEaseInOut },
-      $local: {
-        borderColor,
-        tdColorHover,
-        thColor,
-        thColorHover,
-        tdColor,
-        tdTextColor,
-        thTextColor,
-        thFontWeight,
-        thButtonColorHover,
-        thButtonIconColor,
-        thButtonIconColorActive,
-        fixedColumnBoxShadowColor,
-        filterSize,
-        borderRadius,
-        lineHeight
-      }
-    } = props
-    const fixedColumnStyle = createFixedColumnStyle({ cubicBezierEaseInOut, fixedColumnBoxShadowColor })
-    return [
-      cTB('data-table', {
-        width: '100%'
-      }, [
-        ['small', 'medium', 'large'].map(size => {
-          return createSizeStyle(size, props)
-        }),
-        cB('data-table-empty', {
-          raw: `
-            margin: 16px 0 14px 0;
-            flex-grow: 1;
-            flex-shrink: 0;
-            opacity: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: opacity .3s ${cubicBezierEaseInOut};
-          `
-        }, [
-          cM('hide', {
-            opacity: 0
-          })
-        ]),
-        cE('pagination', {
-          raw: `
-            margin-top: 12px;
-            display: flex;
-            justify-content: flex-end;
-          `
-        }),
-        cB('data-table-wrapper', {
-          raw: `
-            position: relative;
-            transition: border-color .3s ${cubicBezierEaseInOut};
-            border-top-left-radius: ${borderRadius};
-            border-top-right-radius: ${borderRadius};
-            overflow: hidden;
-            line-height: ${lineHeight};
-          `
-        }),
-        cM('single-column', [
-          cB('data-table-wrapper', [
-            cB('data-table-table', [
-              cB('data-table-tr', [
-                cB('data-table-td', {
-                  borderBottom: `0 solid ${borderColor}`
-                }, [
-                  c('&::after, &::before', {
-                    bottom: '0 !important'
-                  })
-                ])
-              ])
-            ])
-          ])
-        ]),
-        cNotM('single-line', [
-          cB('data-table-wrapper', [
-            cB('data-table-table', [
-              cB('data-table-th', {
-                borderRight: `1px solid ${borderColor}`
-              }, [
-                cB('&:last-child', {
-                  borderRight: `0 solid ${borderColor}`
-                })
-              ]),
-              cB('data-table-td', {
-                borderRight: `1px solid ${borderColor}`
-              }, [
-                cB('&:last-child', {
-                  borderRight: `0 solid ${borderColor}`
-                })
-              ])
-            ])
-          ])
-        ]),
-        cM('bordered', [
-          cB('data-table-wrapper', {
-            overflow: 'hidden',
-            border: `1px solid ${borderColor}`,
-            borderBottomLeftRadius: borderRadius,
-            borderBottomRightRadius: borderRadius
-          }, [
-            cB('data-table-table', [
-              cB('data-table-tr', [
-                c('&:last-child', [
-                  cB('data-table-td', {
-                    borderBottom: `0 solid ${borderColor}`
-                  })
-                ])
-              ])
-            ])
-          ])
-        ]),
-        cB('data-table-base-table', [
-          cB('scrollbar', [
-            cB('scrollbar-content', {
-              overflow: 'visible'
-            })
-          ])
-        ]),
-        cB('data-table-table', {
-          raw: `
-            font-variant-numeric: tabular-nums;
-            width: 100%;
-            word-wrap: break-word;
-            word-break: break-all;
-            table-layout: fixed;
-            transition: background-color .3s ${cubicBezierEaseInOut};
-            border-collapse: separate;
-            border-spacing: 0;
-            background-color: ${tdColor}
-          `
-        }, [
-          cB('data-table-thead', {
-            transition: `background-color .3s ${cubicBezierEaseInOut}`,
-            backgroundColor: thColor
-          }),
-          cB('data-table-tr', {
-            boxSizing: 'border-box',
-            backgroundClip: 'padding-box',
-            transition: `background-color .3s ${cubicBezierEaseInOut}`
-          }, [
-            c('&:last-child', [
-              cB('data-table-td', [
-                c('&::after', {
-                  bottom: '0 !important'
-                }),
-                c('&::before', {
-                  bottom: '0 !important'
-                })
-              ])
-            ]),
-            c('&:hover', {
-              backgroundColor: tdColorHover
-            }, [
-              cB('data-table-td', {
-                backgroundColor: tdColorHover
-              })
-            ])
-          ]),
-          cB('data-table-th', {
-            position: 'relative',
-            textAlign: 'start',
-            boxSizing: 'border-box',
-            backgroundColor: thColor,
-            borderColor: borderColor,
-            color: thTextColor,
-            transition: `
-              border-color .3s ${cubicBezierEaseInOut},
-              color .3s ${cubicBezierEaseInOut},
-              background-color .3s ${cubicBezierEaseInOut};
-            `,
-            fontWeight: thFontWeight
-          }, [
-            cM('filterable', {
-              paddingRight: '36px'
-            }),
-            cM('selection', {
-              lineHeight: 0
-            }),
-            cM('ellipsis', {
-              raw: `
-                display: inline-block;
-                vertical-align: middle;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                max-width: 100%;
-              `
-            }),
-            cM('sortable', {
-              cursor: 'pointer'
-            }, [
-              cE('ellipsis', {
-                maxWidth: 'calc(100% - 18px)'
-              }),
-              c('&:hover', {
-                backgroundColor: thColorHover
-              })
-            ]),
-            fixedColumnStyle
-          ]),
-          cB('data-table-td', {
-            raw: `
-              text-align: start;
-              box-sizing: border-box;
-              border: none;
-              background-color: ${tdColor};
-              color: ${tdTextColor};
-              border-bottom: 1px solid ${borderColor};
-              transition:
-                box-shadow .3s ${cubicBezierEaseInOut},
-                background-color .3s ${cubicBezierEaseInOut},
-                border-color .3s ${cubicBezierEaseInOut},
-                color .3s ${cubicBezierEaseInOut};
-            `
-          }, [
-            cM('ellipsis', {
-              raw: `
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-              `
-            }),
-            cM('selection', {
-              lineHeight: 0
-            }),
-            fixedColumnStyle
-          ])
-        ]),
-        cB('data-table-base-table-header', {
-          flexShrink: 0,
-          transition: `border-color .3s ${cubicBezierEaseInOut}`,
-          scrollbarWidth: 'none'
-        }, [
-          c('&::-webkit-scrollbar', {
-            width: 0,
-            height: 0
-          }),
-          cB('data-table-table', {
-            borderBottom: `1px solid ${borderColor}`,
-            transition: `border-color .3s ${cubicBezierEaseInOut}`
-          }),
-          cB('data-table-th', [
-            cB('data-table-sorter', {
-              height: '14px',
-              width: '14px',
-              marginLeft: '4px',
-              position: 'relative',
-              display: 'inline-flex',
-              verticalAlign: '-0.2em',
-              color: thButtonIconColor,
-              transition: `
-                transform .3s ${cubicBezierEaseInOut},
-                color .3s ${cubicBezierEaseInOut}
-              `
-            }, [
-              cM('desc', {
-                transform: 'rotate(0)'
-              }),
-              cM('asc', {
-                transform: 'rotate(-180deg)'
-              }),
-              cM('asc, desc', {
-                color: thButtonIconColorActive
-              })
-            ]),
-            cB('data-table-filter', {
-              raw: `
-                position: absolute;
-                z-index: auto;
-                right: 0;
-                width: 36px;
-                top: 0;
-                bottom: 0;
-                cursor: pointer;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                transition: background-color .3s ${cubicBezierEaseInOut};
-              `
-            }, [
-              c('&:hover', {
-                backgroundColor: thButtonColorHover
-              }),
-              cB('icon', {
-                fontSize: filterSize,
-                color: thButtonIconColor,
-                transition: `color .3s ${cubicBezierEaseInOut}`
-              }),
-              cM('show', {
-                backgroundColor: thButtonColorHover
-              }),
-              cM('active', {
-                backgroundColor: thButtonColorHover
-              }, [
-                cB('icon', {
-                  color: thButtonIconColorActive
-                })
-              ])
-            ])
-          ])
-        ])
-      ]),
-      cB('data-table-filter-menu', [
-        cB('scrollbar', {
-          maxHeight: '240px'
-        }),
-        cE('group', {
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '12px 12px 0 12px'
-        }, [
-          cB('checkbox', {
-            marginBottom: '12px',
-            marginRight: 0
-          }),
-          cB('radio', {
-            marginBottom: '12px',
-            marginRight: 0
-          })
-        ]),
-        cE('action', {
-          padding: '8px 12px',
-          display: 'flex',
-          flexWrap: 'nowrap',
-          justifyContent: 'space-evenly'
-        }, [
-          cB('button', [
-            c('&:not(:last-child)', {
-              marginRight: '8px'
-            })
-          ])
-        ]),
-        cB('divider', {
-          margin: '0!important'
-        })
-      ]),
-      createStyleInsideModal(props)
-    ]
-  }
-])
-
-function createStyleInsideModal (props) {
-  const {
-    $local: {
-      tdColorModal,
-      thColorModal,
-      borderColorModal,
-      thColorHoverModal,
-      tdColorHoverModal
-    }
-  } = props
-  return insideModal(cTB('data-table', [
-    cB('data-table-table', {
-      backgroundColor: tdColorModal
-    }, [
-      cB('data-table-thead', {
-        backgroundColor: thColorModal
-      }),
-      cB('data-table-th', {
-        borderColor: borderColorModal,
-        backgroundColor: thColorModal
-      }, [
-        cM('sortable', [
-          c('&:hover', {
-            backgroundColor: thColorHoverModal
-          })
-        ])
-      ]),
-      cB('data-table-tr', [
-        c('&:hover', {
-          backgroundColor: tdColorHoverModal
-        }, [
-          cB('data-table-td', {
-            backgroundColor: tdColorHoverModal
-          })
-        ])
-      ]),
-      cB('data-table-td', {
-        borderColor: borderColorModal,
-        backgroundColor: tdColorModal
-      })
-    ]),
-    cNotM('single-line', [
-      cB('data-table-wrapper', [
-        cB('data-table-table', [
-          cB('data-table-th', {
-            borderRight: `1px solid ${borderColorModal}`
-          }, [
-            c('&:last-child', {
-              borderRight: `0 solid ${borderColorModal}`
-            })
-          ]),
-          cB('data-table-td', {
-            borderRight: `1px solid ${borderColorModal}`
-          }, [
-            c('&:last-child', {
-              borderRight: `0 solid ${borderColorModal}`
-            })
-          ])
-        ])
-      ])
-    ]),
-    cM('bordered', [
-      cB('data-table-wrapper', {
-        border: `1px solid ${borderColorModal}`
-      }, [
-        cB('data-table-table', [
-          cB('data-table-tr', [
-            c('&:last-child', [
-              cB('data-table-td', {
-                borderBottom: `0 solid ${borderColorModal}`
-              })
-            ])
-          ])
-        ])
-      ])
-    ]),
-    cB('data-table-base-table-header', [
-      cB('data-table-table', {
-        borderBottom: `1px solid ${borderColorModal}`
-      })
-    ])
-  ]))
-}
-
-function createFixedColumnStyle ({
-  cubicBezierEaseInOut
-}) {
-  return [
-    cM('fixed-left', {
-      left: 0,
-      position: 'sticky',
-      zIndex: 2
-    }, [
-      c('&::after', {
-        raw: `
-          pointer-events: none;
-          content: "";
-          width: 36px;
-          display: inline-block;
-          position: absolute;
-          top: 0;
-          bottom: -1px;
-          transition: box-shadow .2s ${cubicBezierEaseInOut};
-          right: -36px;
-        `
-      })
-    ]),
-    cM('fixed-right', {
-      right: 0,
-      position: 'sticky',
-      zIndex: 1
-    }, [
-      c('&::before', {
-        raw: `
-          pointer-events: none;
-          content: "";
-          width: 36px;
-          display: inline-block;
-          position: absolute;
-          top: 0;
-          bottom: -1px;
-          transition: box-shadow .2s ${cubicBezierEaseInOut};
-          left: -36px;
-        `
-      })
-    ]),
-    cM('shadow-before', [
-      c('&::before', {
-        boxShadow: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)'
-      })
-    ]),
-    cM('shadow-after', [
-      c('&::after', {
-        boxShadow: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)'
-      })
-    ])
-  ]
-}
-
-function createSizeStyle (size, props) {
-  const {
-    $local: {
-      [createKey('fontSize', size)]: fontSize,
-      [createKey('thPadding', size)]: thPadding,
-      [createKey('tdPadding', size)]: tdPadding
-    }
-  } = props
-  return cM(`${size}-size`, {
-    fontSize: fontSize
-  }, [
-    cB('data-table-th', {
-      padding: thPadding
-    }),
-    cB('data-table-td', {
-      padding: tdPadding
-    })
-  ])
-}
--- a/src/data-table/styles/dark.js
+++ b/src/data-table/styles/dark.js
@ -1,7 +1,5 @@
-import create from '../../_styles/utils/create-component-base'
 import { composite } from 'seemly'
 import commonVariables from './_common'
-import { baseDark } from '../../_styles/base'
 import { iconDark } from '../../icon/styles'
 import { buttonDark } from '../../button/styles'
 import { checkboxDark } from '../../checkbox/styles'
@ -9,21 +7,20 @@ import { radioDark } from '../../radio/styles'
 import { paginationDark } from '../../pagination/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { dividerDark } from '../../divider/styles'
+import { commonDark } from '../../_styles/new-common'

-export default create({
-  theme: 'dark',
-  name: 'DataTable',
-  peer: [
-    baseDark,
-    iconDark,
-    buttonDark,
-    checkboxDark,
-    radioDark,
-    paginationDark,
-    scrollbarDark,
-    dividerDark
-  ],
-  getLocalVars (vars) {
+export default {
+  common: commonDark,
+  peers: {
+    Icon: iconDark,
+    Button: buttonDark,
+    Checkbox: checkboxDark,
+    Radio: radioDark,
+    Pagination: paginationDark,
+    Scrolllbar: scrollbarDark,
+    Divider: dividerDark
+  },
+  self (vars) {
    const {
      cardColor,
      modalColor,
@ -60,8 +57,8 @@ export default create({
      thTextColor: textColor1Overlay,
      thFontWeight: fontWeightStrong,
      thButtonColorHover: tableColorHoverOverlay,
-      thButtonIconColor: iconColorOverlay,
-      thButtonIconColorActive: primaryColor,
+      thIconColor: iconColorOverlay,
+      thIconColorActive: primaryColor,
      // modal
      borderColorModal: composite(modalColor, dividerColorOverlay),
      tdColorHoverModal: composite(modalColor, tableColorHoverOverlay),
@ -73,4 +70,4 @@ export default create({
      tdColorModal: modalColor
    }
  }
-})
+}
--- a/src/data-table/styles/light.js
+++ b/src/data-table/styles/light.js
@ -1,7 +1,5 @@
-import create from '../../_styles/utils/create-component-base'
 import { composite } from 'seemly'
 import commonVariables from './_common'
-import { baseLight } from '../../_styles/base'
 import { iconLight } from '../../icon/styles'
 import { buttonLight } from '../../button/styles'
 import { checkboxLight } from '../../checkbox/styles'
@ -9,21 +7,20 @@ import { radioLight } from '../../radio/styles'
 import { paginationLight } from '../../pagination/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
 import { dividerLight } from '../../divider/styles'
+import { commonLight } from '../../_styles/new-common'

-export default create({
-  theme: 'light',
-  name: 'DataTable',
-  peer: [
-    baseLight,
-    iconLight,
-    buttonLight,
-    checkboxLight,
-    radioLight,
-    paginationLight,
-    scrollbarLight,
-    dividerLight
-  ],
-  getLocalVars (vars) {
+export default {
+  common: commonLight,
+  peers: {
+    Icon: iconLight,
+    Button: buttonLight,
+    Checkbox: checkboxLight,
+    Radio: radioLight,
+    Pagination: paginationLight,
+    Scrollbar: scrollbarLight,
+    Divider: dividerLight
+  },
+  self (vars) {
    const {
      cardColor,
      modalColor,
@ -60,8 +57,8 @@ export default create({
      thTextColor: textColor1,
      thFontWeight: fontWeightStrong,
      thButtonColorHover: tableColorHoverOverlay,
-      thButtonIconColor: iconColorOverlay,
-      thButtonIconColorActive: primaryColor,
+      thIconColor: iconColorOverlay,
+      thIconColorActive: primaryColor,
      // modal
      borderColorModal: composite(modalColor, dividerColorOverlay),
      tdColorHoverModal: composite(modalColor, tableColorHoverOverlay),
@ -73,4 +70,4 @@ export default create({
      tdColorModal: modalColor
    }
  }
-})
+}
--- a/src/styles.js
+++ b/src/styles.js
@ -31,7 +31,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { checkboxDark, checkboxLight } from './checkbox/styles'
 // export { codeDark, codeLight } from './code/styles'
 // export { collapseDark, collapseLight } from './collapse/styles'
-export { dataTableDark, dataTableLight } from './data-table/styles'
+// export { dataTableDark, dataTableLight } from './data-table/styles'
 export { datePickerDark, datePickerLight } from './date-picker/styles'
 export { descriptionsDark, descriptionsLight } from './descriptions/styles'
 export { dialogDark, dialogLight } from './dialog/styles'
--- a/src/styles.new.js
+++ b/src/styles.new.js
@ -14,6 +14,7 @@ import { cascaderDark } from './cascader/styles'
 import { checkboxDark } from './checkbox/styles'
 import { codeDark } from './code/styles'
 import { collapseDark } from './collapse/styles'
+import { dataTableDark } from './data-table/styles'

 export const darkTheme = {
  common: commonDark,
@ -31,5 +32,6 @@ export const darkTheme = {
  Checkbox: checkboxDark,
  Code: codeDark,
  Collapse: collapseDark,
+  DataTable: dataTableDark,
  Divider: dividerDark
 }