es-grid-template 0.0.13 → 0.1.1

package/es/grid-component/TableGrid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useLayoutEffect, useRef } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
 import { Table, Toolbar } from "rc-master-ui";
@@ -15,6 +15,9 @@ import { flatColumns } from "./hooks/useColumns";
 import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
+// import {useMergedState} from "rc-util";
+// import useMergedState from 'rc-util/lib/hooks/useMergedState';
+
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -63,7 +66,6 @@ const convertFilters = filters => {
 const useStyle = createStyles(({
   css
 }) => {
-  // const { antCls } = token
   const antCls = 'ui-rc';
   return {
     customTable: css`
@@ -82,6 +84,8 @@ const useStyle = createStyles(({
 });
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
+// const EMPTY_LIST: React.Key[] = [];
+
 const TableGrid = props => {
   const {
     columns,
@@ -109,20 +113,31 @@ const TableGrid = props => {
     onFilterClick,
     dataSourceFilter: propDataSourceFilter,
     loading,
-    setColumns,
-    // dataSourceFilter,
+    triggerChangeColumns,
     ...rest
   } = props;
   const {
     styles
   } = useStyle();
+  const {
+    mode,
+    type,
+    checkboxOnly,
+    hideSelectAll,
+    columnWidth,
+    selectedRowKeys
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const clickRef = useRef(null);
   const menuRef = useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const defaultSelected = useMemo(() => {
-    return selectionSettings?.defaultSelectedRowKeys ?? [];
-  }, [selectionSettings?.defaultSelectedRowKeys]);
+
+  // const defaultSelected = useMemo(() => {
+  //   return defaultSelectedRowKeys ?? []
+  //
+  // }, [defaultSelectedRowKeys])
+
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(null);
   const [position, setPosition] = React.useState({
@@ -131,7 +146,25 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
-  const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
+
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
+
+  // ========================= Keys =========================
+  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+  //   selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
+  //   {
+  //     value: selectedRowKeys,
+  //   },
+  // );
+
+  // Reset if rowSelection reset
+
+  // React.useEffect(() => {
+  //   if (!selectionSettings) {
+  //     setMergedSelectedKeys(EMPTY_LIST);
+  //   }
+  // }, [!!selectionSettings]);
+
   const contextMenuItems = React.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -199,7 +232,17 @@ const TableGrid = props => {
       });
     }
   };
-  const handleRowClick = () => {
+  const handleRowClick = () => () => {
+    // console.log(data)
+    // console.log(index)
+
+    // const key = getRowKey(record, index);
+
+    // console.log('key', key)
+
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
     if (clickRef.current) return;
 
     // @ts-ignore
@@ -221,7 +264,7 @@ const TableGrid = props => {
   };
   const onSelectChange = (keys, selectedRows, info, selectedRow) => {
     if (info.type === 'all') {
-      // setSelectedRowKeys(keys)
+      // setMergedSelectedKeys(keys)
       rowSelected?.({
         selected: selectedRows,
         type: 'rowSelected',
@@ -229,7 +272,7 @@ const TableGrid = props => {
       });
     } else {
       if (selectionSettings?.type === 'multiple') {
-        // setSelectedRowKeys(keys)
+        // setMergedSelectedKeys(keys)
         rowSelected?.({
           selected: selectedRows,
           type: 'rowSelected',
@@ -237,7 +280,7 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        setSelectedRowKeys([selectedRow[rowKey]]);
+        setMergedSelectedKeys([selectedRow[rowKey]]);
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -293,19 +336,21 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        onClick: handleRowClick,
+        // onClick: handleRowClick,
+        onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
-      type: selectionSettings?.mode === 'checkbox' || selectionSettings?.type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
+      ...selectionSettings,
+      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
-      selectedRowKeys: selectionSettings?.mode === 'checkbox' && selectionSettings?.type === 'single' ? selectedRowKeys : undefined,
+      selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       ...rowSelection,
-      hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : selectionSettings?.hideSelectAll ?? selectionSettings?.type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     },
     onScroll: () => {
       setMenuVisible(false);
@@ -360,7 +405,7 @@ const TableGrid = props => {
         }
       }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
-        setColumns: setColumns
+        triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/React.createElement("div", null)));
     }
   }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination

package/es/grid-component/index.d.ts

@@ -1,2 +1,4 @@
 import InternalTable from './InternalTable';
+import type { ColumnsTable, TableProps, ColumnTable } from './type';
+export type { ColumnsTable, TableProps, ColumnTable };
 export default InternalTable;

package/es/{table-grid → grid-component}/styles.scss

@@ -5,12 +5,13 @@ $rowHoverBg: #FBDED6 !default;
 $rowSelectedBg: #FEF2EF !default;
 //$tableBorderColor: red !default;
 $tableBorderColor: #e0e0e0 !default;
+//$tableBorderColor: #f0f0f0 !default;
 $border-radius: 6px !default;
 $body-color: #ffffff !default;
 $cell-selected-bg: #E6EFFD !default;
 $cell-index-selected-bg: #0550C5 !default;
 $cell-index-focus-bg: #CEDBEF !default;
-//$rowSelectedHoverBg: 'ui-rc' !default;
+$rowSelectedHoverBg: 'ui-rc' !default;
 
 .react-hot-toast {
   font-size: 1rem;
@@ -46,60 +47,187 @@ $cell-index-focus-bg: #CEDBEF !default;
 }
 
 // -------------- Table -------------
+
 .#{$prefix}-table-wrapper {
-  &.table-none-column-select {
+
+  .#{$prefix}-table-tbody-virtual {
     .#{$prefix}-table-cell {
-      &.#{$prefix}-table-selection-column {
-        padding: 0 !important;
-        overflow: hidden !important;
-        border-inline-end: 0 !important;
-        //flex: 0 0 0 !important;
-        //width: 0 !important;
-      }
+      border-bottom: 1px solid $tableBorderColor;
     }
   }
 
+  .#{$prefix}-table-bordered {
+
+    .#{$prefix}-table-tbody-virtual {
+      .#{$prefix}-table-cell {
+        border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
 
   .#{$prefix}-table-tbody {
     .#{$prefix}-table-row {
       &.#{$prefix}-table-row-selected {
-        >.#{$prefix}-table-cell {
+        > .#{$prefix}-table-cell {
           background: #FEF2EF;
         }
       }
-      >.#{$prefix}-table-cell {
+
+      > .#{$prefix}-table-cell {
         &.#{$prefix}-table-cell-row-hover {
           background: #FBDED6;
         }
+
+        &.ui-rc-cell-command {
+          padding: 3px 8px;
+
+          .ui-rc-cell-command__content {
+            display: flex;
+            gap: 5px;
+            overflow: hidden;
+          }
+        }
+
+
+      }
+    }
+  }
+
+  .#{$prefix}-table-thead {
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: 1px solid $tableBorderColor;
       }
     }
 
+    .ui-rc-table-cell {
+      &.ui-rc-table-cell-fix-left-last {
+        .ui-rc-table-cell-content {
+          //overflow: visible;
+        }
+      }
+    }
   }
 
-  .#{$prefix}-table-tbody-virtual {
+  .#{$prefix}-table-summary {
     .#{$prefix}-table-cell {
+      background-color: #fafafa;
+    }
+
+    > tr > td {
       border-bottom: 1px solid $tableBorderColor;
     }
   }
 
-  .#{$prefix}-table-bordered {
+  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+    border-inline-start: 1px solid $tableBorderColor;
+  }
 
-    .#{$prefix}-table-tbody-virtual {
-      .#{$prefix}-table-cell {
-        border-inline-end: 1px solid $tableBorderColor;
+  .#{$prefix}-table {
+
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        border-inline-start: 1px solid $tableBorderColor;
+        border-top: 1px solid $tableBorderColor;
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead {
+              > tr:not(:last-child) {
+                > th {
+                  border-bottom: 1px solid #eb4619;
+                }
+              }
+            }
+          }
+        }
+
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead,
+            > tbody,
+            > tfoot {
+              > tr {
+                > th,
+                > td {
+                  border-inline-end: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      > .#{$prefix}-table-title {
+        border: 1px solid $tableBorderColor;
+        border-bottom: 0;
       }
     }
 
+    &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+    }
+
   }
 
-  // ---------------- grid-editable---------------
+  .#{$prefix}-table-ping-left {
+    .#{$prefix}-table-cell-fix-left-first::after,
+    .#{$prefix}-table-cell-fix-left-last::after {
+      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.1);
+    }
+  }
+
+  .#{$prefix}-table-ping-right {
+    .#{$prefix}-table-cell-fix-right-first::after,
+    .#{$prefix}-table-cell-fix-right-last::after {
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.1);
+    }
+  }
+
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::before {
+          border-inline-start: 1px solid red;
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: -1px;
+        }
+      }
+    }
+  }
+
+
+}
+
+// -------------- Table edit-------------
+
+.#{$prefix}-table-wrapper {
 
   &.grid-editable {
 
-    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-cell,
-    .#{$prefix}-table.#{$prefix}-table-small .cell-editable,
-    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>th,
-    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>td {
+    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-cell,
+    //.#{$prefix}-table.#{$prefix}-table-small .cell-editable,
+    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>th,
+    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>td {
+    //  padding: 0;
+    //}
+
+    .#{$prefix}-table.#{$prefix}-table-small .rc-ui-cell-editable{
       padding: 0;
     }
 
@@ -198,163 +326,19 @@ $cell-index-focus-bg: #CEDBEF !default;
 
   }
 
-  // ---------------- grid-editable---------------
-
-  .#{$prefix}-table {
-
-   &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
-     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
-   }
-
-    &.#{$prefix}-table-bordered {
-      > .#{$prefix}-table-container {
-        border-inline-start: 1px solid $tableBorderColor;
-        //border-inline-end: 1px solid $tableBorderColor;
-        border-top: 1px solid $tableBorderColor;
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead {
-              > tr:not(:last-child) {
-                > th {
-                  border-bottom: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-
-
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead,
-            > tbody,
-            > tfoot {
-              > tr {
-                > th,
-                > td {
-                  border-inline-end: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-      }
-
-      >.#{$prefix}-table-title {
-        border: 1px solid $tableBorderColor;
-        border-bottom: 0;
-      }
-    }
-
-
-    .#{$prefix}-select-single .#{$prefix}-select-selector {
-      border-radius: 0;
-    }
-  }
-
-
-  .#{$prefix}-table-thead >tr>th,
-  .#{$prefix}-table-thead >tr>td {
-    background-color: #ffffff;
-  }
-
-  .#{$prefix}-table-thead {
-
-    > tr {
-      > th,
-      > td {
-        border-bottom: 1px solid $tableBorderColor;
-      }
-    }
-    .ui-rc-table-cell {
-      &.ui-rc-table-cell-fix-left-last {
-        .ui-rc-table-cell-content {
-          overflow: visible;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}-table-summary {
-    .#{$prefix}-table-cell {
-      background-color: #fafafa;
-    }
-
-    > tr > td {
-      border-bottom: 1px solid $tableBorderColor;
-    }
-  }
-
-  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
-    border-inline-start: 1px solid $tableBorderColor;
-  }
-
-  .#{$prefix}-table.#{$prefix}-table-bordered {
-    > .#{$prefix}-table-container {
-      > .#{$prefix}-table-header > table > thead > tr,
-      > .#{$prefix}-table-summary > table > tfoot > tr {
-        > .#{$prefix}-table-cell-fix-right-first::before {
-          border-inline-start: 1px solid $tableBorderColor;
-          content: "";
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: -1px;
-        }
-      }
-    }
-  }
-
-
-  .#{$prefix}-table.#{$prefix}-table-bordered {
-    > .#{$prefix}-table-container {
-      > .#{$prefix}-table-header > table > thead > tr,
-      > .#{$prefix}-table-summary > table > tfoot > tr {
-        > .#{$prefix}-table-cell-fix-right-first::after {
-          border-inline-end: 0;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}-table-ping-left {
-    .#{$prefix}-table-cell-fix-left-first::after,
-    .#{$prefix}-table-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.2);
-    }
-  }
-
-  .#{$prefix}-table-ping-right {
-    .#{$prefix}-table-cell-fix-right-first::after,
-    .#{$prefix}-table-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
-    }
-  }
-
-  .#{$prefix}-spin-nested-loading >div>.#{$prefix}-spin {
-    max-height: 100%;
-  }
-
-
 }
+// ---------------- Table edit end---------------
+
 
 // -------------- Checkbox ----------
 
 .#{$prefix}-checkbox-indeterminate {
   &:hover {
     .#{$prefix}-checkbox-inner {
-      border-color: $primary !important; ;
+      border-color: $primary !important;;
     }
   }
+
   .#{$prefix}-checkbox-inner {
     &:after {
       background-color: $primary;
@@ -370,6 +354,7 @@ $cell-index-focus-bg: #CEDBEF !default;
         border-color: $primary;
       }
     }
+
     .#{$prefix}-checkbox-inner {
       background-color: $primary;
       border-color: $primary;
@@ -387,6 +372,7 @@ $cell-index-focus-bg: #CEDBEF !default;
   .#{$prefix}-checkbox-inner {
     border-color: $primary;
   }
+
   .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
     .#{$prefix}-checkbox-inner {
       background-color: $primary;
@@ -462,6 +448,7 @@ $cell-index-focus-bg: #CEDBEF !default;
     bottom: 0;
     left: 0;
   }
+
   &::after {
     content: "";
     position: absolute;
@@ -471,19 +458,25 @@ $cell-index-focus-bg: #CEDBEF !default;
     visibility: visible;
     right: 0;
   }
+
   border-bottom: 1px solid $tableBorderColor;
+
   .#{$prefix}-pagination-item-active {
     border-color: $primary;
+
     &:hover {
       border-color: $primary;
+
       a {
         color: $primary;
       }
     }
+
     a {
       color: $primary;
     }
   }
+
   .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
     .#{$prefix}-pagination-item-container {
       .#{$prefix}-pagination-item-link-icon {
@@ -493,27 +486,25 @@ $cell-index-focus-bg: #CEDBEF !default;
   }
 }
 
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-  //border-inline-end: 1px solid $tableBorderColor;
-  border-inline-end: 1px solid $tableBorderColor;
-}
-
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-  //border-inline-end: 1px solid $tableBorderColor;
-  border-inline-end: 0 solid $tableBorderColor;
-}
-
-
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-  margin-top: 0;
-  margin-bottom: 0;
-  border-inline-end: 1px solid $tableBorderColor;
-}
-
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-  border-inline-end: 0 solid $tableBorderColor;
-}
-
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+//  border-inline-end: 1px solid $tableBorderColor;
+//}
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+//  //border-inline-end: 1px solid $tableBorderColor;
+//  border-inline-end: 0 solid $tableBorderColor;
+//}
+//
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+//  margin-top: 0;
+//  margin-bottom: 0;
+//  border-inline-end: 1px solid $tableBorderColor;
+//}
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+//  border-inline-end: 0 solid $tableBorderColor;
+//}
 
 
 .#{$prefix}-table-wrapper {
@@ -542,10 +533,28 @@ $cell-index-focus-bg: #CEDBEF !default;
 .ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-title,
 .ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-footer,
 .ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead>tr>th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody>tr>th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody>tr>td,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot>tr>th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot>tr>td {
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead > tr > th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > td,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > td {
   padding: 5px 8px;
 }
+
+
+//ui-rc-table-ping-right
+
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after {
+  border-inline-end: 1px solid $tableBorderColor;
+}