@semcore/data-table 3.6.3 → 3.7.0

package/lib/es6/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":["React","createComponent","Component","Root","sstyled","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","createRef","event","column","columns","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","setVar","style","setProperty","varWidth","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","flex","isGroup","childrenToColumns","map","join","length","toArray","filter","columnChildren","ref","getBoundingClientRect","forwardRef","push","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","cssVar","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport { Property } from 'csstype';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n  Column,\n  NestedCells,\n  PropsLayer,\n  PseudoChildPropsGetter,\n  RowData,\n  SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n  desc: 'asc',\n  asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n  use: 'primary' | 'secondary';\n  sort: SortDirection[];\n  data: RowData[];\n  uniqueKey: string;\n};\n\ntype HeadAsProps = {\n  children: React.ReactChild;\n};\ntype BodyAsProps = {\n  children: React.ReactChild;\n};\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\ntype ChildRenderFn<Props> = Props & {\n  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/* utils type */\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' | 'asc'];\nexport type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';\nexport type DataTableUse = 'primary' | 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n  /** Name of column */\n  name: string;\n  /** Data of column */\n  data: React.ReactNode;\n  [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n  /** Theme for table\n   * @default primary\n   * */\n  use?: DataTableUse;\n  /** Data for table */\n  data?: DataTableData[];\n  /** Active sort object */\n  sort?: DataTableSort;\n  /** Handler call when will request change sort */\n  onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n  /** Field name in one data entity that is unique accross all set of data\n   * @default id\n   */\n  uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n  /** Sticky header table\n   * @deprecated\n   * */\n  sticky?: boolean;\n\n  /** Hidden header */\n  hidden?: boolean;\n\n  /** Disabled scroll */\n  disabledScroll?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n  /** Unique name column */\n  name?: string;\n  /** Enable sort for column also if you pass string you can set default sort */\n  sortable?: boolean | 'desc' | 'asc';\n  /** Enable resize for column\n   * @ignore */\n  resizable?: boolean;\n  /** Fixed column on the left/right */\n  fixed?: 'left' | 'right';\n  /** Fields to control the size of the column. */\n  flex?: Property.Flex | 'inherit';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n  /** Rows table */\n  rows?: DataTableRow[];\n  /** When enabled, only visually acessable rows are rendered.\n   * `tollerance` property controls how many rows outside of viewport are render.\n   * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n   * @default { tollerance: 2 }\n   */\n  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };\n  /**\n   * Called every time user scrolls area\n   */\n  onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /** Disabled scroll */\n  disabledScroll?: boolean;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n  /** Theme for row */\n  theme?: DataTableTheme;\n  /** Displays row as active/hover */\n  active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n  /** Unique name column or columns separated by / */\n  name: string;\n  /** Theme for cell */\n  theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n  static displayName = 'DefinitionTable';\n\n  static style = style;\n\n  static defaultProps = {\n    use: 'primary',\n    uniqueKey: 'id',\n    sort: [],\n    data: [],\n  } as AsProps;\n\n  columns: Column[] = [];\n\n  tableRef = React.createRef<HTMLElement>();\n  scrollBodyRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n  scrollHeadRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n\n  constructor(props: AsProps) {\n    super(props);\n\n    const createRef = syncScroll();\n    // first create body ref for master scroll\n    this.scrollBodyRef = createRef('body');\n    this.scrollHeadRef = createRef('head');\n  }\n\n  handlerSortClick = (name: string, event: React.MouseEvent) => {\n    const column = this.columns.find((column) => column.name === name)!;\n    return fire(\n      this,\n      'onSortChange',\n      [\n        column.name,\n        column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n      ],\n      event,\n    );\n  };\n\n  handlerResize = () => {\n    this.forceUpdate();\n  };\n\n  scrollToUp = () => {\n    this.tableRef?.current?.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n      behavior: 'smooth',\n    });\n  };\n\n  setVarStyle(columns: Column[]) {\n    for (const column of columns) {\n      if (column.setVar) {\n        this.tableRef.current?.style.setProperty(column.varWidth, `${column.width}px`);\n      }\n    }\n  }\n\n  childrenToColumns(\n    children: React.ReactNode,\n    options: { fixed?: 'left' | 'right' } = { fixed: undefined },\n  ) {\n    const { sort } = this.asProps;\n    const columnsChildren: Column[] = [];\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type !== DefinitionTable.Column) return;\n\n      let {\n        children,\n        name,\n        fixed = options.fixed,\n        resizable,\n        sortable,\n        flex,\n        ...props\n      } = child.props as Column['props'];\n      const isGroup = !name;\n      let columns: Column[] | undefined;\n\n      if (isGroup) {\n        columns = this.childrenToColumns(children, { fixed });\n        name = flattenColumns(columns)\n          .map(({ name }) => name)\n          .join('/');\n        if (!columns.length) return;\n        children = React.Children.toArray(children).filter(\n          (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n        );\n      }\n\n      const column = this.columns.find((column) => column.name === name);\n\n      const columnChildren = {\n        get width() {\n          return this.props.ref.current?.getBoundingClientRect().width || 0;\n        },\n        name,\n        varWidth: createCssVarForWidth(name),\n        setVar: flex !== 'inherit',\n        fixed,\n        resizable,\n        active: sort[0] === name,\n        sortable,\n        sortDirection:\n          sort[0] === name\n            ? sort[1]\n            : column?.sortDirection ||\n              (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n        props: {\n          name,\n          flex: flex === 'inherit' ? undefined : flex,\n          ...props,\n          // @ts-ignore\n          forwardRef: child.ref,\n          children,\n          ref: column?.props?.ref || React.createRef(),\n        },\n      } as Column;\n\n      if (columns) {\n        columnChildren.columns = columns;\n      }\n      columnsChildren.push(columnChildren);\n    });\n    return columnsChildren;\n  }\n\n  getHeadProps(props: HeadAsProps) {\n    const { use } = this.asProps;\n    const columnsChildren = this.childrenToColumns(props.children);\n    this.columns = flattenColumns(columnsChildren);\n    return {\n      $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n      columnsChildren,\n      use,\n      onResize: this.handlerResize,\n      $scrollRef: this.scrollHeadRef,\n    };\n  }\n\n  getBodyProps(props: BodyAsProps) {\n    const { data, use, uniqueKey } = this.asProps;\n\n    const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n    const rowPropsLayers: PropsLayer[] = [];\n\n    React.Children.forEach(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        const { name, children, ...other } = child.props as {\n          name?: string;\n          children?: PseudoChildPropsGetter;\n        } & { [propName: string]: unknown };\n        if (child.type === DefinitionTable.Cell && name) {\n          name.split('/').forEach((name) => {\n            cellPropsLayers[name] = cellPropsLayers[name] || [];\n            cellPropsLayers[name].push({\n              ...other,\n              childrenPropsGetter: children,\n            });\n          });\n        }\n        if (child.type === DefinitionTable.Row) {\n          rowPropsLayers.push({\n            ...other,\n            childrenPropsGetter: children,\n          });\n        }\n      }\n    });\n\n    return {\n      columns: this.columns,\n      rows: this.dataToRows(data, cellPropsLayers),\n      uniqueKey,\n      use,\n      rowPropsLayers,\n      $scrollRef: this.scrollBodyRef,\n    };\n  }\n\n  dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n    const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n      data.map((row) => {\n        const groupByName: {\n          [columnName: string]: {\n            groupedColumns: string[];\n            groupData: { [columnName: string]: unknown };\n          };\n        } = {};\n        const groupedColumns: { [columnname: string]: true } = {};\n        const ungroupedColumns: { [columnname: string]: true } = {};\n        for (const rowKey in row) {\n          const columnNames = rowKey.split('/');\n          if (columnNames.length >= 2) {\n            for (const column of columnNames) {\n              groupByName[column] = {\n                groupedColumns: columnNames,\n                groupData: row[rowKey] as { [columnName: string]: unknown },\n              };\n              groupedColumns[rowKey] = true;\n            }\n          } else {\n            ungroupedColumns[rowKey] = true;\n          }\n        }\n        const rowsGroup = row[ROW_GROUP] || [];\n        const rowsGroupedNames = Object.fromEntries(\n          rowsGroup\n            .map((subRow) => Object.keys(subRow))\n            .flat()\n            .map((key) => [key, true]),\n        );\n\n        let isGroup = false;\n\n        const cells: NestedCells = this.columns\n          .map((column) => {\n            if (groupByName[column.name]) {\n              const { groupedColumns, groupData } = groupByName[column.name];\n              if (groupedColumns[0] === column.name) {\n                return {\n                  name: groupedColumns.join('/'),\n                  cssVar: groupedColumns.map(createCssVarForWidth),\n                  fixed: column.fixed,\n                  data: groupData,\n                  cellPropsLayers: cellPropsLayers[column.name] || [],\n                };\n              }\n            } else if (column.name in row) {\n              return {\n                name: column.name,\n                cssVar: column.varWidth,\n                fixed: column.fixed,\n                data: row[column.name],\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            } else if (!isGroup && rowsGroupedNames[column.name]) {\n              // TODO: make it work not only with first group\n              isGroup = true;\n              return parseData(rowsGroup, {\n                ...ungroupedColumns,\n                ...groupedColumns,\n              });\n            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n              return {\n                name: column.name,\n                cssVar: column.varWidth,\n                fixed: column.fixed,\n                data: null,\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            }\n          })\n          .filter((column) => column !== undefined)\n          .map((column) => column!);\n\n        cells.flatRowData = row;\n        return cells;\n      });\n\n    return parseData(data, {});\n  }\n\n  componentDidUpdate() {\n    this.setVarStyle(this.columns);\n  }\n\n  render() {\n    const SDataTable = Root;\n    const { Children, styles, data } = this.asProps;\n\n    return sstyled(styles)(\n      <SDataTable\n        render={Box}\n        __excludeProps={['data']}\n        ref={this.tableRef}\n        role=\"table\"\n        aria-rowcount={(data ?? []).length}\n      >\n        <Children />\n      </SDataTable>,\n    );\n  }\n}\n\ninterface IDataTableCtx {\n  getHeadProps: PropGetterFn;\n  getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n  return null;\n}\n\nconst DefinitionTable = createComponent(\n  RootDefinitionTable,\n  {\n    Head,\n    Body,\n    Column: ComponentDefinition,\n    Cell: ComponentDefinition,\n    Row: ComponentDefinition,\n  },\n  {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n  Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n  Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n  Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n  Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n  Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":["React","createComponent","Component","Root","sstyled","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","setBorderGroupColumns","columns","side","firstColumn","lastColumn","length","borderLeft","borderRight","RootDefinitionTable","props","createRef","event","column","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","setVar","style","setProperty","varWidth","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","flex","vBorders","lastColumnChildren","isGroup","childrenToColumns","some","c","map","join","toArray","filter","columnChildren","ref","getBoundingClientRect","forwardRef","push","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","cssVar","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport { Property } from 'csstype';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n  Column,\n  NestedCells,\n  PropsLayer,\n  PseudoChildPropsGetter,\n  RowData,\n  SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n  desc: 'asc',\n  asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n  use: 'primary' | 'secondary';\n  sort: SortDirection[];\n  data: RowData[];\n  uniqueKey: string;\n};\n\ntype HeadAsProps = {\n  children: React.ReactChild;\n};\ntype BodyAsProps = {\n  children: React.ReactChild;\n};\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\ntype ChildRenderFn<Props> = Props & {\n  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/* utils type */\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' | 'asc'];\nexport type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';\nexport type DataTableUse = 'primary' | 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n  /** Name of column */\n  name: string;\n  /** Data of column */\n  data: React.ReactNode;\n  [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n  /** Theme for table\n   * @default primary\n   * */\n  use?: DataTableUse;\n  /** Data for table */\n  data?: DataTableData[];\n  /** Active sort object */\n  sort?: DataTableSort;\n  /** Handler call when will request change sort */\n  onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n  /** Field name in one data entity that is unique accross all set of data\n   * @default id\n   */\n  uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n  /** Sticky header table\n   * @deprecated\n   * */\n  sticky?: boolean;\n\n  /** Hidden header */\n  hidden?: boolean;\n\n  /** Disabled scroll */\n  disabledScroll?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n  /** Unique name column */\n  name?: string;\n  /** Enable sort for column also if you pass string you can set default sort */\n  sortable?: boolean | 'desc' | 'asc';\n  /** Enable resize for column\n   * @ignore */\n  resizable?: boolean;\n  /** Fixed column on the left/right */\n  fixed?: 'left' | 'right';\n  /** Fields to control the size of the column. */\n  flex?: Property.Flex | 'inherit';\n  /** Add vertical borders */\n  vBorders?: boolean;\n  /** Add vertical border to the right side */\n  borderRight?: boolean;\n  /** Add vertical border to the left side */\n  borderLeft?: boolean;\n  /** Make cells less */\n  compact?: boolean;\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n  /** Rows table */\n  rows?: DataTableRow[];\n  /** When enabled, only visually acessable rows are rendered.\n   * `tollerance` property controls how many rows outside of viewport are render.\n   * `rowHeight` fixes the rows height if it has known. If not provided, first row node height is measured.\n   * @default { tollerance: 2 }\n   */\n  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };\n  /**\n   * Called every time user scrolls area\n   */\n  onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /** Disabled scroll */\n  disabledScroll?: boolean;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n  /** Theme for row */\n  theme?: DataTableTheme;\n  /** Displays row as active/hover */\n  active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n  /** Unique name column or columns separated by / */\n  name: string;\n  /** Theme for cell */\n  theme?: DataTableTheme;\n}\n\nfunction setBorderGroupColumns(columns: Column[], side?: string) {\n  const firstColumn = columns[0];\n  const lastColumn = columns[columns.length - 1];\n  if (firstColumn && (!side || side === 'left')) {\n    firstColumn.borderLeft = true;\n    if (firstColumn.columns) {\n      setBorderGroupColumns(firstColumn.columns, 'left');\n    }\n  }\n  if (lastColumn && (!side || side === 'right')) {\n    lastColumn.borderRight = true;\n    if (lastColumn.columns) {\n      setBorderGroupColumns(lastColumn.columns, 'right');\n    }\n  }\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n  static displayName = 'DefinitionTable';\n\n  static style = style;\n\n  static defaultProps = {\n    use: 'primary',\n    uniqueKey: 'id',\n    sort: [],\n    data: [],\n  } as AsProps;\n\n  columns: Column[] = [];\n\n  tableRef = React.createRef<HTMLElement>();\n  scrollBodyRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n  scrollHeadRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n\n  constructor(props: AsProps) {\n    super(props);\n\n    const createRef = syncScroll();\n    // first create body ref for master scroll\n    this.scrollBodyRef = createRef('body');\n    this.scrollHeadRef = createRef('head');\n  }\n\n  handlerSortClick = (name: string, event: React.MouseEvent) => {\n    const column = this.columns.find((column) => column.name === name)!;\n    return fire(\n      this,\n      'onSortChange',\n      [\n        column.name,\n        column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n      ],\n      event,\n    );\n  };\n\n  handlerResize = () => {\n    this.forceUpdate();\n  };\n\n  scrollToUp = () => {\n    this.tableRef?.current?.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n      behavior: 'smooth',\n    });\n  };\n\n  setVarStyle(columns: Column[]) {\n    for (const column of columns) {\n      if (column.setVar) {\n        this.tableRef.current?.style.setProperty(column.varWidth, `${column.width}px`);\n      }\n    }\n  }\n\n  childrenToColumns(\n    children: React.ReactNode,\n    options: { fixed?: 'left' | 'right' } = { fixed: undefined },\n  ) {\n    const { sort } = this.asProps;\n    const columnsChildren: Column[] = [];\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type !== DefinitionTable.Column) return;\n\n      let {\n        children,\n        name,\n        fixed = options.fixed,\n        resizable,\n        sortable,\n        flex,\n        vBorders,\n        active,\n        ...props\n      } = child.props as Column['props'];\n      const lastColumnChildren = columnsChildren[columnsChildren.length - 1];\n      const isGroup = !name;\n      let columns: Column[] | undefined;\n\n      if (isGroup) {\n        columns = this.childrenToColumns(children, { fixed });\n        active = typeof active === 'boolean' ? active : columns.some((c) => c.active);\n\n        if (vBorders) {\n          setBorderGroupColumns(columns);\n        }\n\n        name = flattenColumns(columns)\n          .map(({ name }) => name)\n          .join('/');\n        if (!columns.length) return;\n        children = React.Children.toArray(children).filter(\n          (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n        );\n      }\n\n      const column = this.columns.find((column) => column.name === name);\n      const columnChildren = {\n        get width() {\n          // @ts-ignore\n          return this.props.ref.current?.getBoundingClientRect().width || 0;\n        },\n        name,\n        varWidth: createCssVarForWidth(name),\n        setVar: flex !== 'inherit',\n        fixed,\n        resizable,\n        active: typeof active === 'boolean' ? active : sort[0] === name,\n        sortable,\n        borderLeft: lastColumnChildren?.borderRight === true ? false : vBorders,\n        borderRight: vBorders,\n        sortDirection:\n          sort[0] === name\n            ? sort[1]\n            : column?.sortDirection ||\n              (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n        props: {\n          name,\n          flex: flex === 'inherit' ? undefined : flex,\n          ...props,\n          // @ts-ignore\n          forwardRef: child.ref,\n          children,\n          ref: column?.props?.ref || React.createRef(),\n        },\n      } as unknown as Column;\n\n      if (columns) {\n        columnChildren.columns = columns;\n      }\n      columnsChildren.push(columnChildren);\n    });\n    return columnsChildren;\n  }\n\n  getHeadProps(props: HeadAsProps) {\n    const { use } = this.asProps;\n    const columnsChildren = this.childrenToColumns(props.children);\n\n    this.columns = flattenColumns(columnsChildren);\n    return {\n      $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n      columnsChildren,\n      use,\n      onResize: this.handlerResize,\n      $scrollRef: this.scrollHeadRef,\n    };\n  }\n\n  getBodyProps(props: BodyAsProps) {\n    const { data, use, uniqueKey } = this.asProps;\n    const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n    const rowPropsLayers: PropsLayer[] = [];\n\n    React.Children.forEach(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        const { name, children, ...other } = child.props as {\n          name?: string;\n          children?: PseudoChildPropsGetter;\n        } & { [propName: string]: unknown };\n        if (child.type === DefinitionTable.Cell && name) {\n          name.split('/').forEach((name) => {\n            cellPropsLayers[name] = cellPropsLayers[name] || [];\n            cellPropsLayers[name].push({\n              ...other,\n              childrenPropsGetter: children,\n            });\n          });\n        }\n        if (child.type === DefinitionTable.Row) {\n          rowPropsLayers.push({\n            ...other,\n            childrenPropsGetter: children,\n          });\n        }\n      }\n    });\n\n    return {\n      columns: this.columns,\n      rows: this.dataToRows(data, cellPropsLayers),\n      uniqueKey,\n      use,\n      rowPropsLayers,\n      $scrollRef: this.scrollBodyRef,\n    };\n  }\n\n  dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n    const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n      data.map((row) => {\n        const groupByName: {\n          [columnName: string]: {\n            groupedColumns: string[];\n            groupData: { [columnName: string]: unknown };\n          };\n        } = {};\n        const groupedColumns: { [columnname: string]: true } = {};\n        const ungroupedColumns: { [columnname: string]: true } = {};\n        for (const rowKey in row) {\n          const columnNames = rowKey.split('/');\n          if (columnNames.length >= 2) {\n            for (const column of columnNames) {\n              groupByName[column] = {\n                groupedColumns: columnNames,\n                groupData: row[rowKey] as { [columnName: string]: unknown },\n              };\n              groupedColumns[rowKey] = true;\n            }\n          } else {\n            ungroupedColumns[rowKey] = true;\n          }\n        }\n        const rowsGroup = row[ROW_GROUP] || [];\n        const rowsGroupedNames = Object.fromEntries(\n          rowsGroup\n            .map((subRow) => Object.keys(subRow))\n            .flat()\n            .map((key) => [key, true]),\n        );\n\n        let isGroup = false;\n\n        const cells: NestedCells = this.columns\n          .map((column) => {\n            if (groupByName[column.name]) {\n              const { groupedColumns, groupData } = groupByName[column.name];\n              if (groupedColumns[0] === column.name) {\n                return {\n                  name: groupedColumns.join('/'),\n                  cssVar: groupedColumns.map(createCssVarForWidth),\n                  fixed: column.fixed,\n                  data: groupData,\n                  cellPropsLayers: cellPropsLayers[column.name] || [],\n                };\n              }\n            } else if (column.name in row) {\n              return {\n                name: column.name,\n                cssVar: column.varWidth,\n                fixed: column.fixed,\n                data: row[column.name],\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            } else if (!isGroup && rowsGroupedNames[column.name]) {\n              // TODO: make it work not only with first group\n              isGroup = true;\n              return parseData(rowsGroup, {\n                ...ungroupedColumns,\n                ...groupedColumns,\n              });\n            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n              return {\n                name: column.name,\n                cssVar: column.varWidth,\n                fixed: column.fixed,\n                data: null,\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            }\n          })\n          .filter((column) => column !== undefined)\n          .map((column) => column!);\n\n        cells.flatRowData = row;\n        return cells;\n      });\n\n    return parseData(data, {});\n  }\n\n  componentDidUpdate() {\n    this.setVarStyle(this.columns);\n  }\n\n  render() {\n    const SDataTable = Root;\n    const { Children, styles, data } = this.asProps;\n\n    return sstyled(styles)(\n      <SDataTable\n        render={Box}\n        __excludeProps={['data']}\n        ref={this.tableRef}\n        role=\"table\"\n        aria-rowcount={(data ?? []).length}\n      >\n        <Children />\n      </SDataTable>,\n    );\n  }\n}\n\ninterface IDataTableCtx {\n  getHeadProps: PropGetterFn;\n  getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n  return null;\n}\n\nconst DefinitionTable = createComponent(\n  RootDefinitionTable,\n  {\n    Head,\n    Body,\n    Column: ComponentDefinition,\n    Cell: ComponentDefinition,\n    Row: ComponentDefinition,\n  },\n  {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n  Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n  Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n  Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n  Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n  Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}

package/lib/es6/Head.js

@@ -34,16 +34,16 @@ var scrollStyles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SShadowHorizontal_6xe0f_gg_:before{left:var(--left_6xe0f)!important}.___SShadowHorizontal_6xe0f_gg_:after{right:var(--right_6xe0f)!important}.___SContainer_6xe0f_gg_.__disabledScroll_6xe0f_gg_{overflow:visible}"
+".___SShadowHorizontal_dbxvg_gg_:before{left:var(--left_dbxvg)!important}.___SShadowHorizontal_dbxvg_gg_:after{right:var(--right_dbxvg)!important}.___SContainer_dbxvg_gg_.__disabledScroll_dbxvg_gg_{overflow:visible}"
 /*__inner_css_end__*/
-, "6xe0f_gg_")
+, "dbxvg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SShadowHorizontal": "___SShadowHorizontal_6xe0f_gg_",
-  "--left": "--left_6xe0f",
-  "--right": "--right_6xe0f",
-  "__SContainer": "___SContainer_6xe0f_gg_",
-  "_disabledScroll": "__disabledScroll_6xe0f_gg_"
+  "__SShadowHorizontal": "___SShadowHorizontal_dbxvg_gg_",
+  "--left": "--left_dbxvg",
+  "--right": "--right_dbxvg",
+  "__SContainer": "___SContainer_dbxvg_gg_",
+  "_disabledScroll": "__disabledScroll_dbxvg_gg_"
 });
 var SORTING_ICON = {
   desc: SortDesc,
@@ -111,7 +111,7 @@ var Head = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumn",
     value: function renderColumn(column, width) {
-      var _ref2, _column$columns;
+      var _ref2, _column$columns, _column$props$justify;
 
       var _this$asProps = this.asProps,
           styles = _this$asProps.styles,
@@ -119,6 +119,7 @@ var Head = /*#__PURE__*/function (_Component) {
           hidden = _this$asProps.hidden;
       var SColumn = Flex;
       var SHead = Box;
+      var SSortWrapper = 'div';
       var SSortIcon = SORTING_ICON[column.sortDirection];
       var ariaSortValue = column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;
       var isGroup = ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
@@ -148,7 +149,10 @@ var Head = /*#__PURE__*/function (_Component) {
         "fixed": column.fixed,
         "resizable": column.resizable,
         "sortable": column.sortable,
-        "active": column.active,
+        "sortIconFloat": (_column$props$justify = column.props.justifyContent) === null || _column$props$justify === void 0 ? void 0 : _column$props$justify.includes('end'),
+        "borderLeft": isGroup ? false : column.borderLeft,
+        "borderRight": isGroup ? false : column.borderRight,
+        "active": isGroup ? false : column.active,
         "group": isGroup,
         "tabIndex": column.sortable && 0
       }, column.props), {}, {
@@ -161,10 +165,13 @@ var Head = /*#__PURE__*/function (_Component) {
       })), isGroup ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", {
         "role": "columnheader",
         "groupHead": true,
-        "use": use
-      }), /*#__PURE__*/React.createElement("div", _ref2.cn("div", {}), column.props.children)), /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _ref2.cn("div", {}), column.props.children), column.sortable ? /*#__PURE__*/React.createElement(SSortIcon, _ref2.cn("SSortIcon", {
+        "use": use,
+        "active": column.active,
+        "borderLeft": column.borderLeft,
+        "borderRight": column.borderRight
+      }), /*#__PURE__*/React.createElement("div", _ref2.cn("div", {}), column.props.children)), /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /*#__PURE__*/React.createElement(React.Fragment, null, column.props.children, column.sortable ? /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {}), /*#__PURE__*/React.createElement(SSortIcon, _ref2.cn("SSortIcon", {
         "active": column.active
-      })) : null));
+      }))) : null));
     }
   }, {
     key: "render",

package/lib/es6/Head.js.map

@@ -1 +1 @@
-{"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","setRef","SORTING_ICON","desc","asc","ariaSort","Head","name","event","asProps","$onSortClick","code","props","ref","forwardRef","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","value","style","flexBasis","flex","setVar","varWidth","fixed","resizable","refColumn","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","disabledScroll","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  disabledScroll?: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n    setRef(props.ref, ref);\n    if (props.forwardRef) {\n      setRef(props.forwardRef, ref);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const ariaSortValue =\n      column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    if (!column.setVar) {\n      style['flexBasis'] = `var(${column.varWidth})`;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        role={isGroup ? undefined : 'columnheader'}\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        ref={this.refColumn(column.props)}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n        aria-sort={ariaSortValue}\n      >\n        {isGroup ? (\n          <>\n            <SColumn role=\"columnheader\" groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const SHeadWrapper = Box;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky, disabledScroll } =\n      this.asProps;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} disabledScroll={disabledScroll}>\n            <SHead render={Box} role=\"row\">\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"mappings":"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"}
+{"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","setRef","SORTING_ICON","desc","asc","ariaSort","Head","name","event","asProps","$onSortClick","code","props","ref","forwardRef","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortWrapper","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","value","style","flexBasis","flex","setVar","varWidth","fixed","resizable","justifyContent","includes","borderLeft","borderRight","refColumn","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","disabledScroll","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  disabledScroll?: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n    setRef(props.ref, ref);\n    if (props.forwardRef) {\n      setRef(props.forwardRef, ref);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortWrapper = 'div';\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const ariaSortValue =\n      column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    if (!column.setVar) {\n      style['flexBasis'] = `var(${column.varWidth})`;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        role={isGroup ? undefined : 'columnheader'}\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        sortIconFloat={column.props.justifyContent?.includes('end')}\n        borderLeft={isGroup ? false : column.borderLeft}\n        borderRight={isGroup ? false : column.borderRight}\n        active={isGroup ? false : column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        ref={this.refColumn(column.props)}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n        aria-sort={ariaSortValue}\n      >\n        {isGroup ? (\n          <>\n            <SColumn\n              role=\"columnheader\"\n              groupHead\n              use={use}\n              active={column.active}\n              borderLeft={column.borderLeft}\n              borderRight={column.borderRight}\n            >\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            {column.props.children}\n            {column.sortable ? (\n              <SSortWrapper>\n                <SSortIcon active={column.active} />\n              </SSortWrapper>\n            ) : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const SHeadWrapper = Box;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky, disabledScroll } =\n      this.asProps;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} disabledScroll={disabledScroll}>\n            <SHead render={Box} role=\"row\">\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"mappings":"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"}

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,10 +86,29 @@ 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] {
@@ -118,13 +134,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.0",
   "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": "*",