venice-ui 3.0.7 → 3.0.8

package/dist/cjs/components/Table/Table.js

@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
 const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -148,7 +148,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
         return tableProps.elements;
     }, [pagination, paginatedElements, tableProps.elements]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
-        react_1.default.createElement(Table_styles_1.TableRoot, null,
+        react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, height: tableHeight },
             react_1.default.createElement(react_1.default.Fragment, null,
                 (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     react_1.default.createElement(react_1.default.Fragment, null,

package/dist/cjs/components/Table/Table.styles.js

@@ -9,6 +9,7 @@ exports.TableRoot = styled_components_1.default.div `
   display: flex;
   width: 100%;
   flex-direction: column;
+  ${({ height }) => height && `height: ${height};`}
 `;
 exports.TableHeader = styled_components_1.default.div `
   display: flex;
@@ -25,6 +26,7 @@ exports.TableContentWrapper = styled_components_1.default.div `
   overflow-y: hidden;
   overflow-x: auto;
   height: 100%;
+  flex-shrink: 0;
 `;
 exports.HeaderSection = styled_components_1.default.div `
   display: flex;
@@ -40,17 +42,22 @@ exports.TableContent = styled_components_1.default.table `
   overflow-x: auto;
   overflow-y: auto;
   height: 100%;
-  //   border: 1px solid ${({ theme, config }) => config.color.default.common.border};
   border-radius: ${({ theme, config }) => config.size.common.borderRadius}px;
   border-collapse: separate;
   border-spacing: 0;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 `;
 exports.TableHead = styled_components_1.default.thead `
   box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 2;
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index: 0;
+    z-index: 2;
   }
 `;
 exports.TableBody = styled_components_1.default.tbody `

package/dist/esm/components/Table/Table.js

@@ -11,7 +11,7 @@ import { Cell } from './Cell';
 export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -112,7 +112,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
         return tableProps.elements;
     }, [pagination, paginatedElements, tableProps.elements]);
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
-        React.createElement(TableRoot, null,
+        React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, height: tableHeight },
             React.createElement(React.Fragment, null,
                 (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     React.createElement(React.Fragment, null,

package/dist/esm/components/Table/Table.styles.js

@@ -3,6 +3,7 @@ export const TableRoot = styled.div `
   display: flex;
   width: 100%;
   flex-direction: column;
+  ${({ height }) => height && `height: ${height};`}
 `;
 export const TableHeader = styled.div `
   display: flex;
@@ -19,6 +20,7 @@ export const TableContentWrapper = styled.div `
   overflow-y: hidden;
   overflow-x: auto;
   height: 100%;
+  flex-shrink: 0;
 `;
 export const HeaderSection = styled.div `
   display: flex;
@@ -34,17 +36,22 @@ export const TableContent = styled.table `
   overflow-x: auto;
   overflow-y: auto;
   height: 100%;
-  //   border: 1px solid ${({ theme, config }) => config.color.default.common.border};
   border-radius: ${({ theme, config }) => config.size.common.borderRadius}px;
   border-collapse: separate;
   border-spacing: 0;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 `;
 export const TableHead = styled.thead `
   box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 2;
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index: 0;
+    z-index: 2;
   }
 `;
 export const TableBody = styled.tbody `

package/dist/types/components/Table/Table.d.ts

@@ -17,6 +17,7 @@ interface ITableProps {
     pagination?: boolean;
     labels?: IFilterLabels;
     paginationCounters?: number[];
+    tableHeight?: string;
 }
 export interface ITableHeaderProps {
     name: string;

package/dist/types/components/Table/Table.styles.d.ts

@@ -1,6 +1,11 @@
 import { AppTheme } from 'config/themes';
 import { InputSize } from 'types';
-export declare const TableRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ITableRoot {
+    theme: AppTheme;
+    config: any;
+    height?: string;
+}
+export declare const TableRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableRoot, never>;
 interface ITableHeaderProps {
     theme: AppTheme;
     config: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",