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/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>
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
new file mode 100644
index 00000000..403e09ca
--- /dev/null
+++ b/src/components/Table/STable.vue
@@ -0,0 +1,456 @@
+<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="tooltipTheme"
+    :show-summary="showTotal"
+    :sum-text="totalText"
+    :summary-method="totalMethod"
+    :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>
+    <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'
+
+@Component
+export default class STable extends Vue {
+  /**
+   * Data of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+  /**
+   * 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. 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.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly stripe!: boolean
+  /**
+   * Table's vertical border attribute.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Table's size attribute.
+   *
+   * `"big"` by default
+   */
+  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
+  /**
+   * Will width of column automatically be fit its container.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly fit!: boolean
+  /**
+   * Will table header be visible.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly showHeader!: boolean
+  /**
+   * Will selected row be highlighted.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean
+  /**
+   * A key of the current row. Can be `string` or `number`
+   */
+  @Prop() readonly currentRowKey!: string | number
+  /**
+   * Custom class names for the row. Can be `string` or `({ row, rowIndex }) => string`
+   */
+  @Prop() readonly rowClassName!: string | (({ row, rowIndex }) => string)
+  /**
+   * Custom styles for the row. Can be `object` or `({ row, rowIndex }) => object`
+   */
+  @Prop() readonly rowStyle!: object | (({ row, rowIndex }) => object)
+  /**
+   * Custom class names for the cell. Can be `string` or `({ row, column, rowIndex, columnIndex }) => string`
+   */
+  @Prop() readonly cellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
+  /**
+   * Custom styles for the cell. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
+   */
+  @Prop() readonly cellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
+  /**
+   * Custom class names for the row header. Can be `string` or `({ row, rowIndex }) => string`
+   */
+  @Prop() readonly headerRowClassName!: string | (({ row, rowIndex }) => string)
+  /**
+   * Custom styles for the row header. Can be `object` or `({ row, rowIndex }) => object`
+   */
+  @Prop() readonly headerRowStyle!: object | (({ row, rowIndex }) => object)
+  /**
+   * 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)
+  /**
+   * Custom styles for the cell header. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
+   */
+  @Prop() readonly headerCellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
+  /**
+   * 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)
+  /**
+   * A message for an empty data array.
+   *
+   * By default it's set to `"No data"`
+   */
+  @Prop({ default: 'No data', type: String }) readonly emptyText!: string
+  /**
+   * 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
+  /**
+   * 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>
+  /**
+   * 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
+  /**
+   * Tooltip theme property. Can be `"dark"` or `"light"`.
+   *
+   * `"dark"` by default
+   */
+  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipTheme!: string
+  /**
+   * Will total row be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly showTotal!: boolean
+  /**
+   * Text for the total row.
+   *
+   * `"Tot"` by default
+   */
+  @Prop({ default: 'Tot', type: String }) readonly totalText!: string
+  /**
+   * Custom total method. `({ columns, data }) => string`
+   */
+  @Prop() readonly totalMethod!: ({ columns, data }) => string
+  /**
+   * Method that returns rowspan and colspan.
+   *
+   * `({ row, column, rowIndex, columnIndex }) => Array<number> | { rowspan: number; colspan: number }`
+   */
+  @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).
+   *
+   * If `true`, all rows will be selected, else deselected.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly selectOnIndeterminate!: boolean
+  /**
+   * Horizontal indentation of tree data.
+   *
+   * `16` by default
+   */
+  @Prop({ default: 16, type: Number }) readonly indent!: number
+  /**
+   * Will the data will be lazy loaded.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
+  /**
+   * The method for loading child row data, only works when `lazy` is true.
+   * `(row, treeNode, resolve) => any`
+   */
+  @Prop() readonly load!: (row, treeNode, resolve) => any
+  /**
+   * A configuration for rendering nested data
+   */
+  @Prop({ type: Object }) readonly treeProps!: object
+
+  @Ref('table') table!: ElTable
+
+  handleSelect (selection: Array<any>, row: any): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection: Array<any>): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection: Array<any>): void {
+    this.$emit('selection-change', selection)
+  }
+
+  handleCellMouseEnter (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
+    this.$emit('cell-mouse-enter', row, column, cell, event)
+  }
+
+  handleCellMouseLeave (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
+    this.$emit('cell-mouse-leave', row, column, cell, event)
+  }
+
+  handleCellClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
+    this.$emit('cell-click', row, column, cell, event)
+  }
+
+  handleCellDoubleClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
+    this.$emit('cell-double-click', row, column, cell, event)
+  }
+
+  handleRowClick (row: any, column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('row-click', row, column, event)
+  }
+
+  handleRowContextMenu (row: any, column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('row-context-menu', row, column, event)
+  }
+
+  handleRowDoubleClick (row: any, column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('row-double-click', row, column, event)
+  }
+
+  handleHeaderClick (column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('header-click', column, event)
+  }
+
+  handleHeaderContextMenu (column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('header-context-menu', column, event)
+  }
+
+  handleSortChange ({ column, prop, order }): void {
+    this.$emit('sort-change', column, prop, order)
+  }
+
+  handleFilterChange (filterPanel: any): void {
+    const filterArray = Object.values(filterPanel)[0]
+    this.$emit('filter-change', filterArray)
+  }
+
+  handleCurrentChange (currentRow: any, oldCurrentRow: any): void {
+    this.$emit('current-change', currentRow, oldCurrentRow)
+  }
+
+  handleHeaderDragend (newWidth: number, oldWidth: number, column: ElTableColumn, event: MouseEvent): void {
+    this.$emit('header-dragend', newWidth, oldWidth, column, event)
+  }
+
+  handleExpandChange (row: any, expandedRows: Array<any>): void {
+    this.$emit('expand-change', row, expandedRows)
+  }
+
+  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 (filterName: string): void {
+    (this.table as any).clearFilter(filterName)
+  }
+
+  clearFilters (): 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--enable-row-hover .el-table__body tr:hover > td {
+  background-color: $color-neutral-hover;
+  border-left: none;
+  border-right: none;
+}
+.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;
+        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;
+}
+.el-table tr:last-child td {
+  border-bottom-color: $color-basic-white;
+}
+.el-table__header {
+  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 {
+  .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;
+    }
+  }
+}
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  background-color: $color-neutral-placeholder;
+}
+</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
new file mode 100644
index 00000000..05d89e94
--- /dev/null
+++ b/src/components/Table/STableColumn.vue
@@ -0,0 +1,195 @@
+<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 { ElTableColumn } from 'element-ui/types/table-column'
+
+import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+
+@Component
+export default class STableColumn extends Vue {
+  /**
+   * 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
+  /**
+   * 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)
+  /**
+   * Label of the column
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * 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
+  /**
+   * Name of the field
+   */
+  @Prop({ default: '', type: String }) readonly prop!: string
+  /**
+   * Column width in pixels. For instance, `width="80"`
+   */
+  @Prop({ default: '', type: String }) readonly width!: string
+  /**
+   * 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
+  /**
+   * 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
+  /**
+   * Render function for table header of this column.
+   * `(h, { column, $index }) => any`
+   */
+  @Prop() readonly renderHeader!: (h, { column, $index }) => any
+  /**
+   * 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'
+  /**
+   * Sorting method like `Array.sort`, works when `sortable` is true.
+   * `(a, b) => number`
+   */
+  @Prop() readonly sortMethod!: (a, b) => number
+  /**
+   * 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>)
+  /**
+   * 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>
+  /**
+   * 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
+  /**
+   * A function that formats cell content. `(row, column, cellValue, index) => any`
+   */
+  @Prop() readonly formatter!: (row, column, cellValue, index) => any
+  /**
+   * 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
+  /**
+   * 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
+  /**
+   * 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
+  /**
+   * Class name of cells in the column
+   */
+  @Prop({ default: '', type: String }) readonly className!: string
+  /**
+   * Class name of the label of this column
+   */
+  @Prop({ default: '', type: String }) readonly labelClassName!: string
+  /**
+   * 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
+  /**
+   * 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: create custom dropdown menu with filters
+   */
+  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: '', type: String }) readonly filterPlacement!: string
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop() readonly filterMethod!: (value, row, column) => boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Ref('tableColumn') tableColumn!: ElTableColumn
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
new file mode 100644
index 00000000..ec3b1914
--- /dev/null
+++ b/src/components/Table/consts.ts
@@ -0,0 +1,27 @@
+import { Size } from '../../types/size'
+import { TooltipPlacement } from '../Tooltip'
+
+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
+export const ColumnFilterPlacement = TooltipPlacement
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 00000000..2a46f9ea
--- /dev/null
+++ 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
+}
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
 }
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/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
new file mode 100644
index 00000000..daccf7de
--- /dev/null
+++ b/src/stories/Table/STable.stories.ts
@@ -0,0 +1,161 @@
+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],
+  excludeStories: /.*Data$/
+}
+
+export const tableData = [
+  {
+    date: '2017-05-03',
+    amount: '1.56',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    amount: '-99',
+    address: 'No. 190, Grove St, Los Angeles'
+  },
+  {
+    date: '2018-05-04',
+    amount: '0',
+    address: 'No. 191, Grove St, Los Angeles'
+  },
+  {
+    date: '2015-05-01',
+    amount: '55555',
+    address: 'No. 192, Grove St, Los Angeles'
+  }
+]
+
+export const configurable = () => ({
+  components: { STable, STableColumn },
+  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="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
+  }),
+  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)
+    }
+  }
+})
+
+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
+  })
+})
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)
+    }
+  }
+})
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;
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'
 }