mig-schema-table 3.0.84 → 3.0.86

package/dist/SchemaTable/Td/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { oas31 } from "openapi3-ts";
 import { IColumnConfig, IRenderData } from "../../types";
+import "./index.scss";
 interface ITdProps<T> {
     checkedIndexes?: number[];
     disabledCheckedIndexes?: number[];
@@ -8,7 +9,6 @@ interface ITdProps<T> {
     data: T[];
     getRowClassName?: (rowData: T, dataIndex: number, filteredSortedData: IRenderData[]) => string;
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
-    rowHeight: number;
     rowIndex: number;
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
     onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
@@ -20,6 +20,6 @@ interface ITdProps<T> {
     style: React.CSSProperties;
     translate: (key: string, ...args: Array<string | number>) => string;
 }
-declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, translate, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowIndex, sortedRenderData, style, translate, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: typeof Td;
 export default _default;

package/dist/SchemaTable/Td/index.js

@@ -3,7 +3,8 @@ import React from "react";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
 import { localeFormatInTimeZone, timeZone } from "../../inc/date";
 import { DEFAULT_DATE_TIME_FORMAT } from "../../inc/constant";
-function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, translate, }) {
+import "./index.scss";
+function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowIndex, sortedRenderData, style, translate, }) {
     const onTdClick = React.useCallback((e) => {
         if (!sortedRenderData || !onRowClick) {
             return;
@@ -60,7 +61,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             "data-row-index": rowIndex,
             "data-column-index": columnIndex,
             key: propName,
-            style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
+            style,
             onClick: onTdClick,
             onDoubleClick: onTdDoubleClick,
             className: classNames.join(" "),
@@ -77,7 +78,6 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
         propName,
         propSchema === null || propSchema === void 0 ? void 0 : propSchema.format,
         row,
-        rowHeight,
         rowIndex,
         sortedRenderData,
         style,

package/dist/SchemaTable/index.js

@@ -436,7 +436,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         const propSchema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
             : properties[propName]);
-        return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style, translate: translate })) : null;
+        return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style, translate: translate })) : null;
     }, [
         columnNames,
         properties,
@@ -449,7 +449,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         onRowClick,
         onRowDoubleClick,
         config,
-        rowHeight,
         sortedRenderData,
         translate,
     ]);
@@ -570,7 +569,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             type: "text/csv;charset=utf-8",
         }), "export.csv");
     }, [sortedRenderData]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
                     width: rowWidth,
                     height: Math.max(50, tableBodyHeight),
                     border: "1px solid #BBB",

package/dist/index.css

@@ -24,6 +24,9 @@
 .schema-table select {
   height: 33px;
 }
+.schema-table__custom_element_placeholder {
+  flex: 1;
+}
 .schema-table__tbody {
   overflow-x: hidden !important;
   border-collapse: collapse;
@@ -32,23 +35,6 @@
 .schema-table__th-row {
   overflow: hidden !important;
 }
-.schema-table__td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-left: 8px;
-  padding-right: 8px;
-  align-items: center;
-}
-.schema-table__td--odd {
-  background-color: var(--bs-gray-100, #f8f9fa);
-}
-.schema-table__td--even {
-  background-color: var(--bs-white, #fff);
-}
-.schema-table__td--selected {
-  background-color: var(--bs-gray-300, #dee2e6);
-}
 .schema-table--clickable-rows .schema-table__td {
   cursor: pointer;
 }
@@ -56,6 +42,7 @@
   display: flex;
   flex-direction: row;
   padding-bottom: 1rem;
+  align-items: center;
 }
 
 .schema-table__th {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.84",
+  "version": "3.0.86",
   "main": "dist/index.js",
   "files": [
     "dist/"