From 893466cb99e108c46ecdc2aa8a68d310e7090c9f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 16:56:40 +0400
Subject: [PATCH 01/15] Add table template

---
 src/components/Card/SCard.vue         |   2 +-
 src/components/Table/STable.vue       | 273 ++++++++++++++++++++++++++
 src/components/Table/STableColumn.vue |   0
 src/components/Table/consts.ts        |   3 +
 src/components/Table/index.ts         |   0
 5 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Table/STable.vue
 create mode 100644 src/components/Table/STableColumn.vue
 create mode 100644 src/components/Table/consts.ts
 create mode 100644 src/components/Table/index.ts

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 266d758f..ba72dfbc 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop } from 'vue-property-decorator'
 
 import { CardShadow } from './consts'
 
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
new file mode 100644
index 00000000..b2092293
--- /dev/null
+++ b/src/components/Table/STable.vue
@@ -0,0 +1,273 @@
+<template>
+  <el-table
+    ref="table"
+    :data="data"
+    :height="height"
+    :max-height="maxHeight"
+    :stripe="stripe"
+    :border="border"
+    :size="size"
+    :fit="fit"
+    :show-header="showHeader"
+    :highlight-current-row="highlightCurrentRow"
+    :current-row-key="currentRowKey"
+    :row-class-name="rowClassName"
+    :row-style="rowStyle"
+    :cell-class-name="cellClassName"
+    :cell-style="cellStyle"
+    :header-row-class-name="headerRowClassName"
+    :header-row-style="headerRowStyle"
+    :header-cell-class-name="headerCellClassName"
+    :header-cell-style="headerCellStyle"
+    :row-key="rowRey"
+    :empty-text="emptyText"
+    :default-expand-all="defaultExpandAll"
+    :expand-row-keys="expandRowKeys"
+    :default-sort="defaultSort"
+    :tooltip-effect="tooltipEffect"
+    :show-summary="showSummary"
+    :sum-text="sumText"
+    :summary-method="summaryMethod"
+    :span-method="spanMethod"
+    :select-on-indeterminate="selectOnIndeterminate"
+    :indent="indent"
+    :lazy="lazy"
+    :load="load"
+    :tree-props="treeProps"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+    @selection-change="handleSelectionChange"
+    @cell-mouse-enter="handleCellMouseEnter"
+    @cell-mouse-leave="handleCellMouseLeave"
+    @cell-click="handleCellClick"
+    @cell-dblclick="handleCellDoubleClick"
+    @row-click="handleRowClick"
+    @row-contextmenu="handleRowContextMenu"
+    @row-dblclick="handleRowDoubleClick"
+    @header-click="handleHeaderClick"
+    @header-contextmenu="handleHeaderContextMenu"
+    @sort-change="handleSortChange"
+    @filter-change="handleFilterChange"
+    @current-change="handleCurrentChange"
+    @header-dragend="handleHeaderDragend"
+    @expand-change="handleExpandChange"
+  >
+    <slot></slot>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { TooltipTheme } from '../Tooltip'
+import { TableSize } from './consts'
+
+@Component
+export default class STable extends Vue {
+  /**
+   * Data of the table
+   */
+  @Prop({ default: [], type: Array }) readonly data!: Array<any>
+  /**
+   * Table's height
+   */
+  @Prop({ default: 'auto' }) readonly height!: string | number
+  /**
+   * Table's max height
+   */
+  @Prop() readonly maxHeight!: string | number
+  /**
+   * Table's stripe attribute
+   */
+  @Prop({ default: false, type: Boolean }) readonly stripe!: boolean
+  /**
+   * Table's vertical border attribute
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Table's size attribute
+   */
+  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly fit!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly showHeader!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly currentRowKey!: string | number
+  /**
+   * TODO
+   */
+  @Prop() readonly rowClassName!: ({ row, rowIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly rowStyle!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly cellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly cellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerRowClassName!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerRowStyle!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerCellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly headerCellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly rowRey!: ({ row }) => string | string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'No data', type: String }) readonly emptyText!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly defaultExpandAll!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly expandRowKeys!: Array<any>
+  /**
+   * TODO
+   */
+  @Prop({ type: Object }) readonly defaultSort!: object
+  /**
+   * TODO
+   */
+  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipEffect!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly sumText!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly summaryMethod!: ({ columns, data }) => string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly selectOnIndeterminate!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: 16, type: Number }) readonly indent!: number
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly load!: (row, treeNode, resolve) => any
+  /**
+   * TODO
+   */
+  @Prop({ type: Object }) readonly treeProps!: object
+
+  handleSelect (selection, row): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection): void {
+    this.$emit('selection-change', selection)
+  }
+
+  handleCellMouseEnter (row, column, cell, event): void {
+    this.$emit('cell-mouse-enter', row, column, cell, event)
+  }
+
+  handleCellMouseLeave (row, column, cell, event): void {
+    this.$emit('cell-mouse-leave', row, column, cell, event)
+  }
+
+  handleCellClick (row, column, cell, event): void {
+    this.$emit('cell-click', row, column, cell, event)
+  }
+
+  handleCellDoubleClick (row, column, cell, event): void {
+    this.$emit('cell-double-click', row, column, cell, event)
+  }
+
+  handleRowClick (row, column, event): void {
+    this.$emit('row-click', row, column, event)
+  }
+
+  handleRowContextMenu (row, column, event): void {
+    this.$emit('row-context-menu', row, column, event)
+  }
+
+  handleRowDoubleClick (row, column, event): void {
+    this.$emit('row-double-click', row, column, event)
+  }
+
+  handleHeaderClick (column, event): void {
+    this.$emit('header-click', column, event)
+  }
+
+  handleHeaderContextMenu (column, event): void {
+    this.$emit('header-context-menu', column, event)
+  }
+
+  handleSortChange ({ column, prop, order }): void {
+    this.$emit('sort-change', column, prop, order)
+  }
+
+  handleFilterChange (filters): void {
+    this.$emit('filter-change', filters)
+  }
+
+  handleCurrentChange (currentRow, oldCurrentRow): void {
+    this.$emit('current-change', currentRow, oldCurrentRow)
+  }
+
+  handleHeaderDragend (newWidth, oldWidth, column, event): void {
+    this.$emit('header-dragend', newWidth, oldWidth, column, event)
+  }
+
+  handleExpandChange (row, ...args): void {
+    this.$emit('expand-change', row, ...args)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
new file mode 100644
index 00000000..9a6fb1dd
--- /dev/null
+++ b/src/components/Table/consts.ts
@@ -0,0 +1,3 @@
+import { Size } from '@/types/size'
+
+export const TableSize = Size
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 00000000..e69de29b

From 2742795584ddeb50fadc4b0f6476e18fb30a082d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:39:52 +0400
Subject: [PATCH 02/15] Add table column component

---
 src/components/Table/STableColumn.vue | 161 ++++++++++++++++++++++++++
 src/components/index.ts               |   3 +
 2 files changed, 164 insertions(+)

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index e69de29b..0c1c9d6e 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-table-column
+    ref="tableColumn"
+    :type="type"
+    :index="index"
+    :label="label"
+    :column-key="columnKey"
+    :prop="prop"
+    :width="width"
+    :min-width="minWidth"
+    :fixed="fixedPosition || false"
+    :render-header="renderHeader"
+    :sortable="sortable"
+    :sort-method="sortMethod"
+    :sort-by="sortBy"
+    :sort-orders="sortOrders"
+    :resizable="resizable"
+    :formatter="formatter"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :align="align"
+    :header-align="headerAlign"
+    :class-name="headerAlign"
+    :label-class-name="labelClassName"
+    :selectable="selectable"
+    :reserve-selection="reserveSelection"
+    :filters="filters"
+    :filter-placement="filterPlacement"
+    :filter-multiple="filterMultiple"
+    :filter-method="filterMethod"
+    :filtered-value="filteredValue"
+  >
+    <!-- TODO: fix scoped slots with { row, column, $index } data or add possibility to use it -->
+    <slot slot="header" name="header"></slot>
+    <slot></slot>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+
+import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+import { TableColumn } from 'element-ui'
+
+@Component
+export default class STableColumn extends Vue {
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly type!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly index!: number | ((index: number) => number)
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly columnKey!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly prop!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly width!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly minWidth!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly fixedPosition!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly renderHeader!: (h, { column, $index }) => any
+  /**
+   * TODO
+   */
+  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
+  /**
+   * TODO
+   */
+  @Prop() readonly sortMethod!: (a, b) => number
+  /**
+   * TODO
+   */
+  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
+  /**
+   * TODO
+   */
+  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly formatter!: (row, column, cellValue, index) => string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly className!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly labelClassName!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly selectable!: (row, index) => boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly filterPlacement!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly filterMultiple!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly filterMethod!: (value, row, column) => boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Ref('tableColumn') tableColumn!: TableColumn
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 59e17f66..16e8ad4e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -20,6 +20,7 @@ import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
+import { STable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
 export {
@@ -52,5 +53,7 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 }

From 26bfcd1bcf8ec66951add352a71137e86a1aa203 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:40:28 +0400
Subject: [PATCH 03/15] Add story for table component

---
 src/stories/Table/STable.stories.ts | 57 +++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/stories/Table/STable.stories.ts

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
new file mode 100644
index 00000000..1c85b1a8
--- /dev/null
+++ b/src/stories/Table/STable.stories.ts
@@ -0,0 +1,57 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+
+export default {
+  component: STable,
+  title: 'Design System/Table',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table :data="tableData" style="width: 100%">
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 label="Date"
+                 width="180"
+               >
+               </s-table-column>
+               <s-table-column
+                 prop="name"
+                 label="Name"
+                 width="180"
+               >
+               </s-table-column>
+               <s-table-column
+                 prop="address"
+                 label="Address"
+               >
+               </s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: [
+      {
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      }
+    ]
+  })
+})

From bb2f0e0cdc6c2534b8d10a3eba5d9142500201c6 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:40:52 +0400
Subject: [PATCH 04/15] Modify table component

---
 src/components/Table/STable.vue | 48 +++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index b2092293..ca9d87d0 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -67,7 +67,7 @@ export default class STable extends Vue {
   /**
    * Data of the table
    */
-  @Prop({ default: [], type: Array }) readonly data!: Array<any>
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
   /**
    * Table's height
    */
@@ -107,39 +107,39 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop() readonly rowClassName!: ({ row, rowIndex }) => Array<string> | string
+  @Prop() readonly rowClassName!: string | (({ row, rowIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly rowStyle!: ({ row, rowIndex }) => object | object
+  @Prop() readonly rowStyle!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly cellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  @Prop() readonly cellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly cellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  @Prop() readonly cellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerRowClassName!: ({ row, rowIndex }) => object | object
+  @Prop() readonly headerRowClassName!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerRowStyle!: ({ row, rowIndex }) => object | object
+  @Prop() readonly headerRowStyle!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerCellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  @Prop() readonly headerCellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly headerCellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  @Prop() readonly headerCellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly rowRey!: ({ row }) => string | string
+  @Prop() readonly rowRey!: string | (({ row }) => string)
   /**
    * TODO
    */
@@ -151,7 +151,7 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop({ type: Array }) readonly expandRowKeys!: Array<any>
+  @Prop() readonly expandRowKeys!: Array<any>
   /**
    * TODO
    */
@@ -171,11 +171,11 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop({ default: 'Sum', type: String }) readonly summaryMethod!: ({ columns, data }) => string
+  @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
    * TODO
    */
-  @Prop({ default: 'Sum', type: String }) readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
   /**
    * TODO
    */
@@ -269,5 +269,25 @@ export default class STable extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-
+.el-table__header {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: $color-neutral-hover;
+}
+.el-table__body {
+  tr {
+    &.hover-row {
+      > td,
+      &.current-row > td,
+      &.el-table__row--striped > td,
+      &.el-table__row--striped.current-row > td {
+        background-color: $color-neutral-hover;
+      }
+    }
+  }
+}
 </style>

From f5099f5fdfeaac1c7f0653981c85a4a04cb636ba Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:41:17 +0400
Subject: [PATCH 05/15] Add types for table component

---
 src/components/Table/consts.ts | 22 ++++++++++++++++++++++
 src/components/Table/index.ts  | 13 +++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index 9a6fb1dd..d5e92695 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,3 +1,25 @@
 import { Size } from '@/types/size'
 
+export enum ColumnType {
+  SELECTION = 'selection',
+  INDEX = 'index',
+  EXPAND = 'expand'
+}
+
+export enum ColumnFixedPosition {
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+export enum SortDirection {
+  ASC = 'ascending',
+  DESC = 'descending'
+}
+
+export enum ColumnAlignment {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right'
+}
+
 export const TableSize = Size
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index e69de29b..2a46f9ea 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -0,0 +1,13 @@
+import STable from './STable.vue'
+import STableColumn from './STableColumn.vue'
+import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection, TableSize } from './consts'
+
+export {
+  STable,
+  STableColumn,
+  ColumnAlignment,
+  ColumnFixedPosition,
+  ColumnType,
+  SortDirection,
+  TableSize
+}

From d597cbcc8bb6ef6583f5bff86f356df7a3e6577c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:41:36 +0400
Subject: [PATCH 06/15] Fix code style

---
 src/components/Layout/App/SApp.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/App/SApp.vue b/src/components/Layout/App/SApp.vue
index d4616619..583a0d7a 100644
--- a/src/components/Layout/App/SApp.vue
+++ b/src/components/Layout/App/SApp.vue
@@ -1,17 +1,17 @@
 <template>
   <s-container class="s-app">
-    <s-aside v-if="this.$slots.aside" :width="asideWidth">
+    <s-aside v-if="$slots.aside" :width="asideWidth">
       <slot name="aside" />
     </s-aside>
     <s-container>
-      <s-header v-if="this.$slots.header" :height="headerHeight">
+      <s-header v-if="$slots.header" :height="headerHeight">
         <slot name="header" />
       </s-header>
       <slot></slot>
-      <s-main v-if="this.$slots.main">
+      <s-main v-if="$slots.main">
         <slot name="main" />
       </s-main>
-      <s-footer v-if="this.$slots.footer" :height="footerHeight">
+      <s-footer v-if="$slots.footer" :height="footerHeight">
         <slot name="footer" />
       </s-footer>
     </s-container>

From e67f253663fbb59c886def3d552429e4571382d5 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 18:20:52 +0400
Subject: [PATCH 07/15] Modify styles

---
 src/components/Table/STable.vue       | 31 ++++++++++++++++++++++++++-
 src/components/Table/STableColumn.vue |  4 ++--
 src/styles/variables.scss             |  1 +
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index ca9d87d0..2d5348cb 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -57,7 +57,8 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { ElTable } from 'element-ui/types/table'
 
 import { TooltipTheme } from '../Tooltip'
 import { TableSize } from './consts'
@@ -197,6 +198,8 @@ export default class STable extends Vue {
    */
   @Prop({ type: Object }) readonly treeProps!: object
 
+  @Ref('table') table!: ElTable
+
   handleSelect (selection, row): void {
     this.$emit('select', selection, row)
   }
@@ -269,6 +272,7 @@ export default class STable extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
+
 .el-table__header {
   .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
     height: 4px;
@@ -277,6 +281,8 @@ export default class STable extends Vue {
 }
 .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: $color-neutral-hover;
+  border-left: none;
+  border-right: none;
 }
 .el-table__body {
   tr {
@@ -286,8 +292,31 @@ export default class STable extends Vue {
       &.el-table__row--striped > td,
       &.el-table__row--striped.current-row > td {
         background-color: $color-neutral-hover;
+        border-left: none;
+        border-right: none;
       }
     }
   }
 }
+.el-table--border th:first-child .cell,
+.el-table--border td:first-child .cell {
+  padding-left: 13px;
+}
+.el-table thead {
+  color: $color-neutral-tertiary;
+}
+.el-table--group,
+.el-table--border,
+.el-table th.is-leaf,
+.el-table td,
+.el-table--border th {
+  border-color: $color-neutral-placeholder;
+}
+.el-table--group::after,
+.el-table--border::after {
+  background-color: $color-neutral-placeholder;
+}
+.el-table:not(.el-table--border)::before {
+  background-color: $color-basic-white;
+}
 </style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 0c1c9d6e..02fadba6 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -37,9 +37,9 @@
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { ElTableColumn } from 'element-ui/types/table-column'
 
 import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
-import { TableColumn } from 'element-ui'
 
 @Component
 export default class STableColumn extends Vue {
@@ -152,7 +152,7 @@ export default class STableColumn extends Vue {
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 
-  @Ref('tableColumn') tableColumn!: TableColumn
+  @Ref('tableColumn') tableColumn!: ElTableColumn
 }
 </script>
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 581d8ea1..d1cc7572 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,6 +7,7 @@ $color-main-base: #FFF9FA;
 // Neutral colors
 $color-neutral-primary: #53565A;
 $color-neutral-secondary: #75787B;
+$color-neutral-tertiary: #909296;
 $color-neutral-inactive: #C8C9C7;
 $color-neutral-border: #D9D9D6;
 $color-neutral-hover: #F0F0F0;

From f13bfb6d5fc57c2ec1874adbbfc245b0fa5a9e7c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 20:23:37 +0400
Subject: [PATCH 08/15] Complete table component

---
 src/components/Table/STable.vue | 201 +++++++++++++++++++++++++-------
 1 file changed, 158 insertions(+), 43 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 2d5348cb..34e43168 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -24,7 +24,7 @@
     :default-expand-all="defaultExpandAll"
     :expand-row-keys="expandRowKeys"
     :default-sort="defaultSort"
-    :tooltip-effect="tooltipEffect"
+    :tooltip-effect="tooltipTheme"
     :show-summary="showSummary"
     :sum-text="sumText"
     :summary-method="summaryMethod"
@@ -61,140 +61,186 @@ import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 
 import { TooltipTheme } from '../Tooltip'
-import { TableSize } from './consts'
+import { TableSize, SortDirection } from './consts'
 
 @Component
 export default class STable extends Vue {
   /**
-   * Data of the table
+   * Data of the table.
+   *
+   * By default it's set to an empty array
    */
   @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
   /**
-   * Table's height
+   * Table's height. It can be `number` with a number of pixels.
+   * Also, it can be a string with CSS height value.
+   *
+   * `"auto"` by default
    */
   @Prop({ default: 'auto' }) readonly height!: string | number
   /**
-   * Table's max height
+   * Table's max height. It can be `number` with a number of pixels.
+   * Also, it can be a string with CSS height value
    */
   @Prop() readonly maxHeight!: string | number
   /**
-   * Table's stripe attribute
+   * Table's stripe attribute.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly stripe!: boolean
   /**
-   * Table's vertical border attribute
+   * Table's vertical border attribute.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
   /**
-   * Table's size attribute
+   * Table's size attribute.
+   *
+   * `"big"` by default
    */
   @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
   /**
-   * TODO
+   * Will width of column automatically be fit its container.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly fit!: boolean
   /**
-   * TODO
+   * Will table header be visible.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly showHeader!: boolean
   /**
-   * TODO
+   * Will selected row be highlighted.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean
   /**
-   * TODO
+   * A key of the current row. Can be `string` or `number`
    */
   @Prop() readonly currentRowKey!: string | number
   /**
-   * TODO
+   * Custom class names for the row. Can be `string` or `({ row, rowIndex }) => string`
    */
   @Prop() readonly rowClassName!: string | (({ row, rowIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the row. Can be `object` or `({ row, rowIndex }) => object`
    */
   @Prop() readonly rowStyle!: object | (({ row, rowIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the cell. Can be `string` or `({ row, column, rowIndex, columnIndex }) => string`
    */
   @Prop() readonly cellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the cell. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
    */
   @Prop() readonly cellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the row header. Can be `string` or `({ row, rowIndex }) => string`
    */
-  @Prop() readonly headerRowClassName!: object | (({ row, rowIndex }) => object)
+  @Prop() readonly headerRowClassName!: string | (({ row, rowIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the row header. Can be `object` or `({ row, rowIndex }) => object`
    */
   @Prop() readonly headerRowStyle!: object | (({ row, rowIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the cell header. Can be `string` or `({ row, column, rowIndex, columnIndex }) => string`
    */
   @Prop() readonly headerCellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the cell header. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
    */
   @Prop() readonly headerCellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
-   * TODO
+   * A key of the row data, used for optimizing rendering.
+   * Required if `reserve-selection` is true or display tree data.
+   * When its type is `string`, multi-level access is supported,
+   * e.g. `user.info.id`, but `user.info[0].id` is not supported,
+   * in which case `({ row }) => string` should be used.
    */
   @Prop() readonly rowRey!: string | (({ row }) => string)
   /**
-   * TODO
+   * A message for an empty data array.
+   *
+   * By default it's set to `"No data"`
    */
   @Prop({ default: 'No data', type: String }) readonly emptyText!: string
   /**
-   * TODO
+   * Expand all rows by default.
+   * It works when the table has a column with `type="expand"` or contains tree structure data
    */
   @Prop({ default: false, type: Boolean }) readonly defaultExpandAll!: boolean
   /**
-   * TODO
+   * Set expanded rows by this property, prop's value is the keys of expand rows.
+   * You should set `row-key` before using this property
    */
   @Prop() readonly expandRowKeys!: Array<any>
   /**
-   * TODO
+   * Set the default sort column and order object.
+   *
+   * `prop` is used to set default sort column,
+   *
+   * `order` is used to set default sort order: `"ascending"`, `"descending"`
    */
   @Prop({ type: Object }) readonly defaultSort!: object
   /**
-   * TODO
+   * Tooltip theme property. Can be `"dark"` or `"light"`.
+   *
+   * `"dark"` by default
    */
-  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipEffect!: string
+  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipTheme!: string
   /**
-   * TODO
+   * Will summary row be shown.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
   /**
-   * TODO
+   * Text for the summary row.
+   *
+   * `"Sum"` by default
    */
   @Prop({ default: 'Sum', type: String }) readonly sumText!: string
   /**
-   * TODO
+   * Custom summary method. `({ columns, data }) => string`
    */
   @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
-   * TODO
+   * Method that returns rowspan and colspan. `({ row, column, rowIndex, columnIndex }) => any`
    */
   @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
   /**
-   * TODO
+   * Controls the behavior of master checkbox in multi-select tables
+   * when only some rows are selected (but not all).
+   *
+   * If `true`, all rows will be selected, else deselected.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly selectOnIndeterminate!: boolean
   /**
-   * TODO
+   * Horizontal indentation of tree data.
+   *
+   * `16` by default
    */
   @Prop({ default: 16, type: Number }) readonly indent!: number
   /**
-   * TODO
+   * Will the data will be lazy loaded.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
   /**
-   * TODO
+   * The method for loading child row data, only works when `lazy` is true.
+   * `(row, treeNode, resolve) => any`
    */
   @Prop() readonly load!: (row, treeNode, resolve) => any
   /**
-   * TODO
+   * A configuration for rendering nested data
    */
   @Prop({ type: Object }) readonly treeProps!: object
 
@@ -267,18 +313,48 @@ export default class STable extends Vue {
   handleExpandChange (row, ...args): void {
     this.$emit('expand-change', row, ...args)
   }
+
+  clearSelection (): void {
+    this.table.clearSelection()
+  }
+
+  toggleRowSelection (row: object, selected?: boolean): void {
+    this.table.toggleRowSelection(row, selected)
+  }
+
+  toggleAllSelection (): void {
+    this.table.toggleAllSelection()
+  }
+
+  toggleRowExpansion (row: object, expanded?: boolean): void {
+    this.table.toggleRowExpansion(row, expanded)
+  }
+
+  setCurrentRow (row?: object): void {
+    this.table.setCurrentRow(row)
+  }
+
+  clearSort (): void {
+    this.table.clearSort()
+  }
+
+  clearFilter (): void {
+    this.table.clearFilter()
+  }
+
+  doLayout (): void {
+    this.table.doLayout()
+  }
+
+  sort (prop: string, order: SortDirection): void {
+    this.table.sort(prop, order)
+  }
 }
 </script>
 
 <style lang="scss">
 @import "../../styles/variables.scss";
 
-.el-table__header {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
-  }
-}
 .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: $color-neutral-hover;
   border-left: none;
@@ -319,4 +395,43 @@ export default class STable extends Vue {
 .el-table:not(.el-table--border)::before {
   background-color: $color-basic-white;
 }
+.el-table tr:last-child td {
+  border-color: $color-basic-white;
+}
+.el-table__header {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table--medium {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 5px;
+  }
+  .el-checkbox__inner {
+    height: 16px;
+    width: 16px;
+    &::after {
+      top: 0;
+      left: 4px;
+      height: 8px;
+      width: 4px;
+    }
+  }
+}
+.el-table--small {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 4px;
+  }
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    &::after {
+      top: 1px;
+      left: 4px;
+      height: 6px;
+      width: 2px;
+    }
+  }
+}
 </style>

From f5bbe19f87b84032f47a30eac73884f7fc7e40ff Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:13:42 +0400
Subject: [PATCH 09/15] Fix issues

---
 src/components/Table/STable.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 34e43168..3500aabf 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -202,17 +202,19 @@ export default class STable extends Vue {
   /**
    * Text for the summary row.
    *
-   * `"Sum"` by default
+   * `"Tot"` by default
    */
-  @Prop({ default: 'Sum', type: String }) readonly sumText!: string
+  @Prop({ default: 'Tot', type: String }) readonly sumText!: string
   /**
    * Custom summary method. `({ columns, data }) => string`
    */
   @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
-   * Method that returns rowspan and colspan. `({ row, column, rowIndex, columnIndex }) => any`
+   * Method that returns rowspan and colspan.
+   *
+   * `({ row, column, rowIndex, columnIndex }) => Array<number> | { rowspan: number; colspan: number }`
    */
-  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => Array<number> | { rowspan: number; colspan: number }
   /**
    * Controls the behavior of master checkbox in multi-select tables
    * when only some rows are selected (but not all).
@@ -338,7 +340,11 @@ export default class STable extends Vue {
     this.table.clearSort()
   }
 
-  clearFilter (): void {
+  clearFilter (filterName: string): void {
+    (this.table as any).clearFilter(filterName)
+  }
+
+  clearFilters (): void {
     this.table.clearFilter()
   }
 
@@ -396,7 +402,7 @@ export default class STable extends Vue {
   background-color: $color-basic-white;
 }
 .el-table tr:last-child td {
-  border-color: $color-basic-white;
+  border-bottom-color: $color-basic-white;
 }
 .el-table__header {
   .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
@@ -434,4 +440,8 @@ export default class STable extends Vue {
     }
   }
 }
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  background-color: $color-neutral-placeholder;
+}
 </style>

From 4e716a14463edee67fe556ffda1604129f909fe4 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:14:06 +0400
Subject: [PATCH 10/15] Finish story for table component

---
 src/stories/Table/STable.stories.ts | 103 ++++++++++++++++------------
 1 file changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 1c85b1a8..51a91d7c 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -1,57 +1,76 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { STable, STableColumn } from '../../components'
+import { TableSize } from '../../components/Table'
 
 export default {
   component: STable,
   title: 'Design System/Table',
-  decorators: [withKnobs]
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
 }
 
+export const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
+
 export const configurable = () => ({
   components: { STable, STableColumn },
-  template: `<s-table :data="tableData" style="width: 100%">
+  template: `<s-table
+               :data="tableData"
+               :size="size"
+               :height="height"
+               :stripe="stripe"
+               :border="border"
+               :show-header="showHeader"
+               :highlight-current-row="highlightCurrentRow"
+             >
                <s-table-column type="selection"></s-table-column>
-               <s-table-column
-                 prop="date"
-                 label="Date"
-                 width="180"
-               >
-               </s-table-column>
-               <s-table-column
-                 prop="name"
-                 label="Name"
-                 width="180"
-               >
-               </s-table-column>
-               <s-table-column
-                 prop="address"
-                 label="Address"
-               >
-               </s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="name" label="Name" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
              </s-table>`,
   data: () => ({
-    tableData: [
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      }
-    ]
-  })
+    tableData: tableData
+  }),
+  props: {
+    height: {
+      default: text('Height', 'auto')
+    },
+    stripe: {
+      default: boolean('Stripe', false)
+    },
+    border: {
+      default: boolean('Border', false)
+    },
+    showHeader: {
+      default: boolean('Show header', true)
+    },
+    size: {
+      default: select('Size', Object.values(TableSize), TableSize.BIG)
+    },
+    highlightCurrentRow: {
+      default: boolean('Highlight current row', false)
+    }
+  }
 })

From 98c445edddd8204b4e69c7d5964b06f48dd6d437 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:36:37 +0400
Subject: [PATCH 11/15] Add new stories for Table component

---
 src/components/Table/STable.vue     | 18 +++---
 src/stories/Table/STable.stories.ts | 95 +++++++++++++++++++++++++++--
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 3500aabf..845d736d 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -25,9 +25,9 @@
     :expand-row-keys="expandRowKeys"
     :default-sort="defaultSort"
     :tooltip-effect="tooltipTheme"
-    :show-summary="showSummary"
-    :sum-text="sumText"
-    :summary-method="summaryMethod"
+    :show-summary="showTotal"
+    :sum-text="totalText"
+    :summary-method="totalMethod"
     :span-method="spanMethod"
     :select-on-indeterminate="selectOnIndeterminate"
     :indent="indent"
@@ -194,21 +194,21 @@ export default class STable extends Vue {
    */
   @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipTheme!: string
   /**
-   * Will summary row be shown.
+   * Will total row be shown.
    *
    * `false` by default
    */
-  @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
+  @Prop({ default: false, type: Boolean }) readonly showTotal!: boolean
   /**
-   * Text for the summary row.
+   * Text for the total row.
    *
    * `"Tot"` by default
    */
-  @Prop({ default: 'Tot', type: String }) readonly sumText!: string
+  @Prop({ default: 'Tot', type: String }) readonly totalText!: string
   /**
-   * Custom summary method. `({ columns, data }) => string`
+   * Custom total method. `({ columns, data }) => string`
    */
-  @Prop() readonly summaryMethod!: ({ columns, data }) => string
+  @Prop() readonly totalMethod!: ({ columns, data }) => string
   /**
    * Method that returns rowspan and colspan.
    *
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 51a91d7c..2d12f3b0 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -13,22 +13,22 @@ export default {
 export const tableData = [
   {
     date: '2016-05-03',
-    name: 'Tom',
+    amount: '1.56',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-02',
-    name: 'Tom',
+    amount: '-99',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-04',
-    name: 'Tom',
+    amount: '0',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-01',
-    name: 'Tom',
+    amount: '55555',
     address: 'No. 189, Grove St, Los Angeles'
   }
 ]
@@ -46,7 +46,7 @@ export const configurable = () => ({
              >
                <s-table-column type="selection"></s-table-column>
                <s-table-column prop="date" label="Date" width="180"></s-table-column>
-               <s-table-column prop="name" label="Name" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
                <s-table-column prop="address" label="Address"></s-table-column>
                <s-table-column type="expand">Hello</s-table-column>
              </s-table>`,
@@ -74,3 +74,88 @@ export const configurable = () => ({
     }
   }
 })
+
+export const withBorder = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const striped = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               stripe
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withAllExpandedRows = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               default-expand-all
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withTotalRow = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               show-total
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withDefaultSort = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               :defaultSort="{ prop: 'amount', order: 'descending' }"
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column sortable prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column sortable prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})

From 0a0b2179fc4ad5b90c24fc924d4828d72974d77f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:37:51 +0400
Subject: [PATCH 12/15] Add docs

---
 src/components/Table/STableColumn.vue | 92 ++++++++++++++++++---------
 1 file changed, 63 insertions(+), 29 deletions(-)

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 02fadba6..05d89e94 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -44,111 +44,145 @@ import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
 @Component
 export default class STableColumn extends Vue {
   /**
-   * TODO
+   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
+   * If it's not defined, then it will be usual column without modifications
    */
   @Prop({ default: '', type: String }) readonly type!: string
   /**
-   * TODO
+   * Customize indices for each row. It works on columns with `type="index"`.
+   * Can be `number` or `(index: number) => number`
    */
   @Prop() readonly index!: number | ((index: number) => number)
   /**
-   * TODO
+   * Label of the column
    */
   @Prop({ default: '', type: String }) readonly label!: string
   /**
-   * TODO
+   * Column's key. If you need to use the `filter-change` event,
+   * you need this attribute to identify which column is being filtered
    */
   @Prop({ default: '', type: String }) readonly columnKey!: string
   /**
-   * TODO
+   * Name of the field
    */
   @Prop({ default: '', type: String }) readonly prop!: string
   /**
-   * TODO
+   * Column width in pixels. For instance, `width="80"`
    */
   @Prop({ default: '', type: String }) readonly width!: string
   /**
-   * TODO
+   * Column minimum width in pixels. Columns with `width` has a fixed width,
+   * while columns with `min-width` has a width that is distributed in proportion.
+   * For instance, `min-width="80"`
    */
   @Prop({ default: '', type: String }) readonly minWidth!: string
   /**
-   * TODO
+   * Will column be fixed at `"left"` or `"right"` position.
+   * If it's not defined, then it will be not fixed by default.
    */
   @Prop({ default: '', type: String }) readonly fixedPosition!: string
   /**
-   * TODO
+   * Render function for table header of this column.
+   * `(h, { column, $index }) => any`
    */
   @Prop() readonly renderHeader!: (h, { column, $index }) => any
   /**
-   * TODO
+   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
+   * Remote sorting can be done by setting this attribute to `"custom"`
+   * and listening to the `sort-change` event of the Table component
    */
   @Prop({ default: false }) readonly sortable!: boolean | 'custom'
   /**
-   * TODO
+   * Sorting method like `Array.sort`, works when `sortable` is true.
+   * `(a, b) => number`
    */
   @Prop() readonly sortMethod!: (a, b) => number
   /**
-   * TODO
+   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
+   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
+   *
+   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
    */
   @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
   /**
-   * TODO
+   * The order of the sorting strategies used when sorting the data,
+   * works when `sortable` is true.
+   * Accepts an array, as the user clicks on the header,
+   * the column is sorted in order of the elements in the array.
+   *
+   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
+   *
+   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
    */
   @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
   /**
-   * TODO
+   * Can column be resized. It works only when the table has `border` set to true.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
   /**
-   * TODO
+   * A function that formats cell content. `(row, column, cellValue, index) => any`
    */
-  @Prop() readonly formatter!: (row, column, cellValue, index) => string
+  @Prop() readonly formatter!: (row, column, cellValue, index) => any
   /**
-   * TODO
+   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
   /**
-   * TODO
+   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
    */
   @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
   /**
-   * TODO
+   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
    */
   @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
   /**
-   * TODO
+   * Class name of cells in the column
    */
   @Prop({ default: '', type: String }) readonly className!: string
   /**
-   * TODO
+   * Class name of the label of this column
    */
   @Prop({ default: '', type: String }) readonly labelClassName!: string
   /**
-   * TODO
+   * A function that determines if a certain row can be selected.
+   * It works when `type="selection"`. `(row, index) => boolean`
    */
   @Prop() readonly selectable!: (row, index) => boolean
   /**
-   * TODO
+   * Will selection be reserved after data refreshing.
+   * It works when `type="selection"`.
+   *
+   * `row-key` is required for this to work.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
   /**
-   * TODO
+   * TODO: create custom dropdown menu with filters
    */
   @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop({ default: '', type: String }) readonly filterPlacement!: string
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
-  @Prop({ default: true, type: Boolean }) readonly filterMultiple!: boolean
+  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop() readonly filterMethod!: (value, row, column) => boolean
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 

From de3a3ebe7cf08c023d4961fa80a174941caab732 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:38:26 +0400
Subject: [PATCH 13/15] Add table column stories

---
 src/stories/Table/STable.stories.ts       |  12 +--
 src/stories/Table/STableColumn.stories.ts | 103 ++++++++++++++++++++++
 2 files changed, 109 insertions(+), 6 deletions(-)
 create mode 100644 src/stories/Table/STableColumn.stories.ts

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 2d12f3b0..daccf7de 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -12,24 +12,24 @@ export default {
 
 export const tableData = [
   {
-    date: '2016-05-03',
+    date: '2017-05-03',
     amount: '1.56',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-02',
     amount: '-99',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 190, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-04',
+    date: '2018-05-04',
     amount: '0',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 191, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-01',
+    date: '2015-05-01',
     amount: '55555',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 192, Grove St, Los Angeles'
   }
 ]
 
diff --git a/src/stories/Table/STableColumn.stories.ts b/src/stories/Table/STableColumn.stories.ts
new file mode 100644
index 00000000..1ec6025b
--- /dev/null
+++ b/src/stories/Table/STableColumn.stories.ts
@@ -0,0 +1,103 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+import { ColumnAlignment } from '../../components/Table'
+
+import { tableData } from './STable.stories'
+
+export default {
+  component: STableColumn,
+  title: 'Design System/Table/Table Column',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 width="80"
+                 resizable
+                 :label="label"
+                 :show-overflow-tooltip="showOverflowTooltip"
+                 :align="align"
+                 :header-align="headerAlign"
+               >
+               </s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  }),
+  props: {
+    label: {
+      default: text('Label', 'Date')
+    },
+    showOverflowTooltip: {
+      default: boolean('Show overflow tooltip', true)
+    },
+    align: {
+      default: select('Align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+    },
+    headerAlign: {
+      default: select('Header align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+    }
+  }
+})
+
+export const withFilters = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 width="80"
+                 resizable
+                 label="Date"
+                 show-overflow-tooltip
+                 :filters="tableFilters"
+                 :filterMethod="filterDate"
+                 :filter-multiple="filterMultiple"
+               >
+               </s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData,
+    tableFilters: [
+      { text: '< 2016-01-01', value: 1 },
+      { text: 'between 2016-01-01 and 2016-05-01', value: 2 },
+      { text: 'between 2016-05-01 and 2018-05-05', value: 3 },
+      { text: '> 2019-01-01', value: 4 }
+    ],
+    filterDate: (value: number, row: any) => {
+      const date = new Date(row.date).getTime()
+      switch (value) {
+        case 1:
+          return date < new Date('2016-01-01').getTime()
+        case 2:
+          return date > new Date('2016-01-01').getTime() && date < new Date('2016-05-01').getTime()
+        case 3:
+          return date > new Date('2016-05-01').getTime() && date < new Date('2018-05-05').getTime()
+        case 4:
+          return date > new Date('2019-01-01').getTime()
+      }
+      return true
+    }
+  }),
+  props: {
+    filterMultiple: {
+      default: boolean('Filter multiple', false)
+    }
+  }
+})

From 7aaa86ff8dce8d84c5a75149bf14f087bd6c9e65 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:38:46 +0400
Subject: [PATCH 14/15] Modify table component

---
 src/components/Table/STable.vue | 51 +++++++++++++++++++--------------
 src/components/Table/consts.ts  |  4 ++-
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 845d736d..403e09ca 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -53,12 +53,14 @@
     @expand-change="handleExpandChange"
   >
     <slot></slot>
+    <slot slot="empty" name="empty"></slot>
   </el-table>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
+import { ElTableColumn } from 'element-ui/types/table-column'
 
 import { TooltipTheme } from '../Tooltip'
 import { TableSize, SortDirection } from './consts'
@@ -248,51 +250,51 @@ export default class STable extends Vue {
 
   @Ref('table') table!: ElTable
 
-  handleSelect (selection, row): void {
+  handleSelect (selection: Array<any>, row: any): void {
     this.$emit('select', selection, row)
   }
 
-  handleSelectAll (selection): void {
+  handleSelectAll (selection: Array<any>): void {
     this.$emit('select-all', selection)
   }
 
-  handleSelectionChange (selection): void {
+  handleSelectionChange (selection: Array<any>): void {
     this.$emit('selection-change', selection)
   }
 
-  handleCellMouseEnter (row, column, cell, event): void {
+  handleCellMouseEnter (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-mouse-enter', row, column, cell, event)
   }
 
-  handleCellMouseLeave (row, column, cell, event): void {
+  handleCellMouseLeave (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-mouse-leave', row, column, cell, event)
   }
 
-  handleCellClick (row, column, cell, event): void {
+  handleCellClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-click', row, column, cell, event)
   }
 
-  handleCellDoubleClick (row, column, cell, event): void {
+  handleCellDoubleClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-double-click', row, column, cell, event)
   }
 
-  handleRowClick (row, column, event): void {
+  handleRowClick (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-click', row, column, event)
   }
 
-  handleRowContextMenu (row, column, event): void {
+  handleRowContextMenu (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-context-menu', row, column, event)
   }
 
-  handleRowDoubleClick (row, column, event): void {
+  handleRowDoubleClick (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-double-click', row, column, event)
   }
 
-  handleHeaderClick (column, event): void {
+  handleHeaderClick (column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-click', column, event)
   }
 
-  handleHeaderContextMenu (column, event): void {
+  handleHeaderContextMenu (column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-context-menu', column, event)
   }
 
@@ -300,20 +302,21 @@ export default class STable extends Vue {
     this.$emit('sort-change', column, prop, order)
   }
 
-  handleFilterChange (filters): void {
-    this.$emit('filter-change', filters)
+  handleFilterChange (filterPanel: any): void {
+    const filterArray = Object.values(filterPanel)[0]
+    this.$emit('filter-change', filterArray)
   }
 
-  handleCurrentChange (currentRow, oldCurrentRow): void {
+  handleCurrentChange (currentRow: any, oldCurrentRow: any): void {
     this.$emit('current-change', currentRow, oldCurrentRow)
   }
 
-  handleHeaderDragend (newWidth, oldWidth, column, event): void {
+  handleHeaderDragend (newWidth: number, oldWidth: number, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-dragend', newWidth, oldWidth, column, event)
   }
 
-  handleExpandChange (row, ...args): void {
-    this.$emit('expand-change', row, ...args)
+  handleExpandChange (row: any, expandedRows: Array<any>): void {
+    this.$emit('expand-change', row, expandedRows)
   }
 
   clearSelection (): void {
@@ -405,9 +408,15 @@ export default class STable extends Vue {
   border-bottom-color: $color-basic-white;
 }
 .el-table__header {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
+  label.el-checkbox.is-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .el-checkbox__input {
+    &.is-indeterminate .el-checkbox__inner::before {
+      height: 4px;
+      top: 7px;
+    }
   }
 }
 .el-table--medium {
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index d5e92695..ec3b1914 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,5 @@
-import { Size } from '@/types/size'
+import { Size } from '../../types/size'
+import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
   SELECTION = 'selection',
@@ -23,3 +24,4 @@ export enum ColumnAlignment {
 }
 
 export const TableSize = Size
+export const ColumnFilterPlacement = TooltipPlacement

From 325141cd6be433e278b94300184efd49a5a70abd Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:41:42 +0400
Subject: [PATCH 15/15] Add exports

---
 src/index.ts            | 6 ++++++
 src/types/components.ts | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 61d5a248..12c29690 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,6 +30,8 @@ import {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 } from './components'
 import { Components } from './types/components'
@@ -65,6 +67,8 @@ const elements = [
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: STable, name: Components.STable },
+  { component: STableColumn, name: Components.STableColumn },
   { component: STooltip, name: Components.STooltip }
 ]
 
@@ -111,6 +115,8 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 }
 export default SoramitsuElements
diff --git a/src/types/components.ts b/src/types/components.ts
index 701af730..ed91efee 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -28,5 +28,7 @@ export enum Components {
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',
   SSubmenu = 'SSubmenu',
+  STable = 'STable',
+  STableColumn = 'STableColumn',
   STooltip = 'STooltip'
 }