@semcore/data-table 3.6.3 → 3.7.1

package/lib/es6/style/data-table.shadow.css

@@ -2,6 +2,13 @@ SDataTable {
   position: relative;
 }
 
+SDataTable[compact] {
+  & SColumn,
+  & SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
 SHeadWrapper {
   position: relative;
 }
@@ -22,16 +29,16 @@ SHead {
 
 SColumn {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-grow: 1;
   font-size: var(--intergalactic-fs-100, 12px);
   color: var(--intergalactic-text-primary, #191b23);
   box-sizing: border-box;
   position: relative;
 
-  &:focus {
+  &:focus-visible {
     outline: none;
-    box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
+    box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
   }
 }
 
@@ -44,7 +51,6 @@ SColumn[hidden] {
 
 SColumn[use='primary'] {
   padding: var(--intergalactic-spacing-3x, 12px);
-  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
   border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
   background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
 }
@@ -55,10 +61,6 @@ SColumn[use='secondary'] {
   background-color: var(--intergalactic-table-th-secondary-cell, #ffffff);
 }
 
-SColumn[use]:last-child {
-  border-right: none;
-}
-
 SColumn[group][use] {
   display: flex;
   flex-wrap: wrap;
@@ -68,19 +70,14 @@ SColumn[group][use] {
   padding: 0;
 }
 
-SColumn[groupHead][use] {
+SColumn[groupHead] {
   justify-content: center;
-  border-right: none;
   /* for resizable */
   z-index: 1;
 }
 
-SColumn[groupHead][use='primary'] {
-  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
-}
-
-SColumn[groupHead][use='secondary'] {
-  border-bottom: 1px solid var(--intergalactic-border-table-accent-border, #a9abb6);
+SColumn[groupHead] {
+  border-bottom: none;
 }
 
 SColumn[sortable] {
@@ -89,15 +86,36 @@ SColumn[sortable] {
   &[use='primary']:hover {
     background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
   }
+
+  &:hover SSortWrapper {
+    display: block;
+  }
 }
 
-SColumn[active][use='primary'] {
+SColumn[use='primary'][active] {
   background-color: var(--intergalactic-table-th-primary-cell-active, #e0e1e9);
+  width: 100%;
+}
+
+SColumn[active] SSortIcon {
+  position: relative;
+}
+
+SColumn[active] SSortWrapper {
+  display: block;
+  width: 16px;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+}
+
+SColumn[sortIconFloat] SSortWrapper {
+  width: 0;
 }
 
 SColumn[resizable] {
+  border-right: 1px solid transparent;
+
   &:hover:after {
-    background: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+    border-right-color: var(--intergalactic-border-table-accent-border, #a9abb6);
   }
 
   &:after {
@@ -105,10 +123,11 @@ SColumn[resizable] {
     position: absolute;
     bottom: 0;
     right: -1px;
-    height: 100vh;
-    width: 1px;
+    height: 100%;
+    width: 5px;
     background: transparent;
     cursor: col-resize;
+    border-right: 1px solid transparent;
   }
 }
 
@@ -118,13 +137,54 @@ SColumn[fixed] {
   z-index: 2;
 }
 
-SSortIcon {
-  fill: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  margin-left: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+SColumn[borderLeft],
+SCell[borderLeft] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SColumn[borderRight],
+SCell[borderRight] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
 }
 
-SSortIcon[active] {
+SSortIcon {
   fill: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
+  position: absolute;
+  top: -2px;
+  right: 0;
+}
+
+SSortWrapper {
+  display: none;
+  flex-shrink: 999;
+  position: relative;
+  flex-basis: 20px;
+  height: 0;
+}
+
+SSortWrapper:before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  right: 0;
+  width: 20px;
+  height: 16px;
+}
+
+SColumn[use='primary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+    rgba(224, 225, 233, 0) 105%
+  );
+}
+
+SColumn[use='secondary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+    rgba(255, 255, 255, 0) 105%
+  );
 }
 
 SBodyWrapper {

package/lib/es6/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & Partial<{\n    flex: Property.Flex;\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    forwardRef: React.Ref<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B"}
+{"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  vBorders?: boolean;\n  borderLeft?: boolean;\n  borderRight?: boolean;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & Partial<{\n    flex: Property.Flex;\n    justifyContent: Property.JustifyContent;\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    forwardRef: React.Ref<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n    vBorders: boolean;\n    borderLeft: boolean;\n    borderRight: boolean;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B"}

package/lib/types/DataTable.d.ts

@@ -64,13 +64,21 @@ export interface IDataTableColumnProps extends IFlexProps {
     fixed?: 'left' | 'right';
     /** Fields to control the size of the column. */
     flex?: Property.Flex | 'inherit';
+    /** Add vertical borders */
+    vBorders?: boolean;
+    /** Add vertical border to the right side */
+    borderRight?: boolean;
+    /** Add vertical border to the left side */
+    borderLeft?: boolean;
+    /** Make cells less */
+    compact?: boolean;
 }
 export interface IDataTableBodyProps extends IBoxProps {
     /** Rows table */
     rows?: DataTableRow[];
     /** When enabled, only visually acessable rows are rendered.
      * `tollerance` property controls how many rows outside of viewport are render.
-     * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.
+     * `rowHeight` fixes the rows height if it has known. If not provided, first row node height is measured.
      * @default { tollerance: 2 }
      */
     virtualScroll?: boolean | {

package/lib/types/types.d.ts

@@ -28,11 +28,15 @@ export declare type Column<Props extends {
     varWidth: string;
     setVar: boolean;
     data?: unknown;
+    vBorders?: boolean;
+    borderLeft?: boolean;
+    borderRight?: boolean;
     props: {
         name: string;
         ref: React.RefObject<HTMLElement>;
     } & Partial<{
         flex: Property.Flex;
+        justifyContent: Property.JustifyContent;
         onClick: (event: React.MouseEvent) => void;
         onKeyDown: (event: React.KeyboardEvent) => void;
         forwardRef: React.Ref<HTMLElement>;
@@ -42,6 +46,9 @@ export declare type Column<Props extends {
         resizable: boolean;
         sortable: boolean | SortDirection;
         sortDirection: SortDirection;
+        vBorders: boolean;
+        borderLeft: boolean;
+        borderRight: boolean;
     }> & Props;
     columns: Column[];
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "3.6.3",
+  "version": "3.7.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -25,7 +25,6 @@
     "@semcore/typography": "*",
     "@semcore/accordion": "*",
     "@semcore/divider": "*",
-    "@semcore/link": "*",
     "@semcore/portal": "*",
     "@semcore/progress-bar": "*",
     "@semcore/skeleton": "*",