mig-schema-table 3.0.120 → 3.0.122

package/dist/SchemaTable/ColumnResizers/index.js

@@ -24,9 +24,9 @@ const ColumnResizers = ({ columnWidths, onColumnWidthsChange, resizeColumnIndex,
     }, [dragStartX, setColumnDelta, setResizeColumnIndex]);
     return (_jsx("div", { children: columnWidths.map((columnWidth, columnIndex) => {
             pointer += columnWidth;
-            const classNames = ["schema-table__column_resizer"];
+            const classNames = ["mig-schema-table__column_resizer"];
             if (columnIndex === resizeColumnIndex) {
-                classNames.push("schema-table__column_resizer--dragged");
+                classNames.push("mig-schema-table__column_resizer--dragged");
             }
             return (_jsx("div", { style: { left: pointer, bottom: tableBodyHeight }, className: classNames.join(" "), draggable: "true", "data-column-index": columnIndex, onDragStart: onDragStart, onDragEnd: onDragEnd }, columnIndex));
         }) }));

package/dist/SchemaTable/Td/index.js

@@ -46,12 +46,12 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             }
         }
         const classNames = [
-            "schema-table__td",
-            `schema-table__td--${rowIndex % 2 ? "odd" : "even"}`,
-            `schema-table__td--prop-${propName}`,
+            "mig-schema-table__td",
+            `mig-schema-table__td--${rowIndex % 2 ? "odd" : "even"}`,
+            `mig-schema-table__td--prop-${propName}`,
         ];
         if (getRowSelected && getRowSelected(data[row._index], row._index)) {
-            classNames.push("schema-table__td--selected");
+            classNames.push("mig-schema-table__td--selected");
         }
         if (getRowClassName) {
             classNames.push(getRowClassName(data[row._index], row._index, sortedRenderData));

package/dist/SchemaTable/Th/index.js

@@ -12,19 +12,19 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
     const [isDragging, setIsDragging] = React.useState(false);
     const [isDropTarget, setIsDropTarget] = React.useState(false);
     const classNames = [
-        `schema-table__th`,
-        `schema-table__th--filter-${columnFilterStatus}`,
-        `schema-table__th--prop-${propName}`,
+        `mig-schema-table__th`,
+        `mig-schema-table__th--filter-${columnFilterStatus}`,
+        `mig-schema-table__th--prop-${propName}`,
     ];
-    classNames.push(isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable");
+    classNames.push(isSortable ? "mig-schema-table__th--sortable" : "mig-schema-table__th--unsortable");
     if (sortAsc !== undefined) {
-        classNames.push("schema-table__th--sorted");
+        classNames.push("mig-schema-table__th--sorted");
     }
     if (isDragging) {
-        classNames.push(`schema-table__th--dragging`);
+        classNames.push(`mig-schema-table__th--dragging`);
     }
     if (isDropTarget) {
-        classNames.push(`schema-table__th--drop-target`);
+        classNames.push(`mig-schema-table__th--drop-target`);
     }
     const onLabelClick = React.useCallback(() => {
         if (!isSortable) {
@@ -84,7 +84,7 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
         e.dataTransfer.dropEffect = "move";
         e.dataTransfer.setData("text/plain", propName);
     }, [onColumnPositionChange, propName]);
-    const onDragEnd = React.useCallback((e) => {
+    const onDragEnd = React.useCallback(() => {
         if (!onColumnPositionChange) {
             return;
         }
@@ -108,7 +108,7 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
             return;
         }
         const sourcePropName = e.dataTransfer.getData("text/plain");
-        if (!sourcePropName) {
+        if (!sourcePropName || sourcePropName === propName) {
             return;
         }
         onColumnPositionChange(sourcePropName, propName);
@@ -136,6 +136,6 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
                 classNames.push(`text-${propConfig.align}`);
             }
     }
-    return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" "), title: title }, { children: [_jsxs("div", Object.assign({ className: "schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, { children: [_jsx("span", Object.assign({ className: "schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
+    return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" "), title: title, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, { children: [_jsxs("div", Object.assign({ className: "mig-schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "mig-schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "mig-schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
 };
 export default React.memo(Th);

package/dist/SchemaTable/ThMenu/FilterMenuComponent/index.js

@@ -36,7 +36,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                     ? newValue
                     : undefined, persistState);
             };
-            return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", style: { marginRight: 14 }, checked: !!numberColumnFilterValue.filterEmpty, onChange: () => {
+            return (_jsxs("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", style: { marginRight: 14 }, checked: !!numberColumnFilterValue.filterEmpty, onChange: () => {
                                             const { filterEmpty } = numberColumnFilterValue, newNumberColumnFilterValue = __rest(numberColumnFilterValue, ["filterEmpty"]);
                                             if (!filterEmpty) {
                                                 newNumberColumnFilterValue.filterEmpty = true;
@@ -57,7 +57,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
             if (value === undefined) {
                 selectValue = "";
             }
-            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
                             switch (e.currentTarget.value) {
                                 case "✓":
                                     onChange(true, true);
@@ -72,7 +72,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
         // @ts-ignore
         case "string":
             if (propSchema === null || propSchema === void 0 ? void 0 : propSchema.enum) {
-                return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
+                return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
                                 onChange(e.currentTarget.value || undefined, true);
                             } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((value) => {
                                     return (_jsx("option", Object.assign({ value: value }, { children: translate(value) }), `column-filter-select-${value}`));
@@ -87,7 +87,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                     to: undefined,
                     filterEmpty: undefined,
                 });
-                return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", checked: !!dateRangeValue.filterEmpty, onChange: () => {
+                return (_jsxs("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", checked: !!dateRangeValue.filterEmpty, onChange: () => {
                                                 const { filterEmpty } = dateRangeValue, newDateRangeValue = __rest(dateRangeValue, ["filterEmpty"]);
                                                 if (!filterEmpty) {
                                                     newDateRangeValue.filterEmpty = true;
@@ -122,7 +122,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
             }
         // falls through
         default:
-            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
                             onChange(e.currentTarget.value || undefined, false);
                         }, onKeyDown: onInputKeyDown, onBlur: (e) => {
                             onChange(e.currentTarget.value || undefined, true);

package/dist/SchemaTable/ThMenu/index.js

@@ -49,8 +49,8 @@ const ThMenu = ({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, p
     if (!isSortable && !isFilterable) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "schema-table__th-menu", ref: setMenu, style: menuPopper.styles.popper }, menuPopper.attributes.popper, { children: _jsxs("ol", Object.assign({ className: "schema-table-menu" }, { children: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mig-schema-table__th-menu", ref: setMenu, style: menuPopper.styles.popper }, menuPopper.attributes.popper, { children: _jsxs("ol", Object.assign({ className: "mig-schema-table-menu" }, { children: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
                                 setSubMenuReferenceElement(e.currentTarget);
-                            } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: _jsx("input", { type: "checkbox", id: "schema-table__th-menu__filters", checked: value !== undefined, disabled: value === undefined, onChange: onFilterCheckboxChange }) })), _jsx("label", Object.assign({ htmlFor: "schema-table__th-menu__filters" }, { children: "Filters" })), _jsx("div", Object.assign({ className: "schema-table__th-menu__sub-menu-indicator" }, { children: ">" }))] }))) : null] })) })), subMenuReferenceElement ? (_jsx("div", Object.assign({ className: "schema-table__th-menu__sub-menu", ref: setSubMenu, style: subMenuPopper.styles.popper }, subMenuPopper.attributes.popper, { children: _jsx(FilterMenu, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema, translate: translate }) }))) : null] }));
+                            } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: _jsx("input", { type: "checkbox", id: "mig-schema-table__th-menu__filters", checked: value !== undefined, disabled: value === undefined, onChange: onFilterCheckboxChange }) })), _jsx("label", Object.assign({ htmlFor: "mig-schema-table__th-menu__filters" }, { children: "Filters" })), _jsx("div", { className: "mig-schema-table__th-menu__sub-menu-indicator" })] }))) : null] })) })), subMenuReferenceElement ? (_jsx("div", Object.assign({ className: "mig-schema-table__th-menu__sub-menu", ref: setSubMenu, style: subMenuPopper.styles.popper }, subMenuPopper.attributes.popper, { children: _jsx(FilterMenu, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema, translate: translate }) }))) : null] }));
 };
 export default React.memo(ThMenu);

package/dist/SchemaTable/index.js

@@ -577,7 +577,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 refreshData();
             }
             if (onSearchEnter &&
-                e.currentTarget.className === "schema-table__search") {
+                e.currentTarget.className === "mig-schema-table__search") {
                 onSearchEnter(searchQuery);
             }
         }
@@ -701,7 +701,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         localStorage.removeItem(`${settingsStorageKey}.columnWidths`);
         setColumnWidths(undefined);
     }, [settingsStorageKey]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: Math.min(rowWidth, width) }), 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", name: "search", autoComplete: "off", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null, settingsStorageKey ? (_jsx("button", Object.assign({ onClick: onClearSettingsButtonClick, style: { marginLeft: 8 }, disabled: !serializedStoredColumnNames && !serializedStoredColumnWidths }, { children: translate("clearSettings") }))) : null] })), columnNames && columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_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}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", Object.assign({ className: `mig-schema-table${onRowClick ? " mig-schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: Math.min(rowWidth, width) }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "mig-schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "mig-schema-table__search", type: "text", name: "search", autoComplete: "off", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "mig-schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "mig-schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null, settingsStorageKey ? (_jsx("button", Object.assign({ onClick: onClearSettingsButtonClick, style: { marginLeft: 8 }, disabled: !serializedStoredColumnNames && !serializedStoredColumnWidths }, { children: translate("clearSettings") }))) : null] })), columnNames && columnWidths ? (_jsxs("div", Object.assign({ className: "mig-schema-table__column_resize_container" }, { children: [_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: "mig-schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "mig-schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
                             width: rowWidth,
                             height: Math.max(50, tableBodyHeight),
                             border: "1px solid #BBB",

package/dist/index.css

@@ -1,57 +1,58 @@
-.schema-table,
-.schema-table * {
+.mig-schema-table,
+.mig-schema-table * {
   box-sizing: border-box;
 }
-.schema-table button {
+.mig-schema-table button {
   border: 1px solid #e4e4e4;
   padding: 8px;
 }
-.schema-table button:enabled {
+.mig-schema-table button:enabled {
   background-color: #f6f6f6;
   color: #404040;
 }
-.schema-table button:enabled:hover {
+.mig-schema-table button:enabled:hover {
   border-color: #dbdbdb;
   background-color: #ececec;
 }
-.schema-table input {
+.mig-schema-table input {
   padding: 8px;
   border: 1px solid #888;
 }
-.schema-table input:hover {
+.mig-schema-table input:hover {
   border-color: lightblue;
 }
-.schema-table select {
+.mig-schema-table select {
   height: 33px;
 }
-.schema-table__custom_element_placeholder {
+.mig-schema-table__custom_element_placeholder {
   flex: 1;
 }
-.schema-table__tbody {
+.mig-schema-table__tbody {
   overflow-x: hidden !important;
   border-collapse: collapse;
   width: 100%;
 }
-.schema-table__th-row {
+.mig-schema-table__th-row {
   overflow: hidden !important;
 }
-.schema-table--clickable-rows .schema-table__td {
+.mig-schema-table--clickable-rows .mig-schema-table__td {
   cursor: pointer;
 }
-.schema-table__action-container {
+.mig-schema-table__action-container {
   display: flex;
   flex-direction: row;
   padding-bottom: 1rem;
   align-items: center;
 }
-.schema-table__row_counter {
+.mig-schema-table__row_counter {
+  margin-left: 8px;
   font-size: 0.835rem;
 }
-.schema-table__column_resize_container {
+.mig-schema-table__column_resize_container {
   position: relative;
 }
 
-.schema-table__th {
+.mig-schema-table__th {
   background-color: #fcfcfc;
   border-right: 1px solid #ddd;
   border-top: 1px solid #ddd;
@@ -63,45 +64,45 @@
   padding-right: 8px;
   user-select: none;
 }
-.schema-table__th:first-child {
+.mig-schema-table__th:first-child {
   border-left: 1px solid #ddd;
 }
-.schema-table__th div {
+.mig-schema-table__th div {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.schema-table__th--sorted {
+.mig-schema-table__th--sorted {
   background-color: #eff6fb;
 }
-.schema-table__th--dragging {
+.mig-schema-table__th--dragging {
   opacity: 0.5;
 }
-.schema-table__th--dragging .schema-table__th__trigger-el {
+.mig-schema-table__th--dragging .mig-schema-table__th__trigger-el {
   display: none !important;
 }
-.schema-table__th--drop-target {
+.mig-schema-table__th--drop-target {
   border-right: 3px dashed green;
 }
-.schema-table__th--drop-target .schema-table__th__trigger-el {
+.mig-schema-table__th--drop-target .mig-schema-table__th__trigger-el {
   display: none !important;
 }
-.schema-table__th--filter-ACTIVE .schema-table__th__label-body-text {
+.mig-schema-table__th--filter-ACTIVE .mig-schema-table__th__label-body-text {
   text-decoration: underline;
   font-style: italic;
 }
-.schema-table__th__label-body {
+.mig-schema-table__th__label-body {
   display: flex;
   flex: 1;
   font-size: 14px;
   align-items: center;
 }
-.schema-table__th__label-body-text {
+.mig-schema-table__th__label-body-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.schema-table__th__trigger-el {
+.mig-schema-table__th__trigger-el {
   display: none;
   position: absolute;
   border: 1px solid #ddd;
@@ -116,66 +117,66 @@
   text-align: center;
   padding: 5px 0 0 !important;
 }
-.schema-table__th__sort-icon {
+.mig-schema-table__th__sort-icon {
   font-size: 24px;
   width: 32px;
   display: block;
   text-align: center;
 }
-.schema-table__th:hover {
+.mig-schema-table__th:hover {
   background-color: #eff6fb;
 }
-.schema-table__th:hover .schema-table__th__trigger-el {
+.mig-schema-table__th:hover .mig-schema-table__th__trigger-el {
   display: block !important;
 }
-.schema-table__th svg {
+.mig-schema-table__th svg {
   vertical-align: baseline;
 }
 
-.schema-table__th-menu {
+.mig-schema-table__th-menu {
   background-color: white;
   z-index: 99999;
 }
-.schema-table__th-menu label {
+.mig-schema-table__th-menu label {
   flex: 1;
 }
-.schema-table__th-menu .schema-table__th-menu__sub-menu-indicator {
+.mig-schema-table__th-menu .mig-schema-table__th-menu__sub-menu-indicator {
   padding-left: 8px;
   margin-left: 8px;
 }
-.schema-table__th-menu__icon {
+.mig-schema-table__th-menu__icon {
   display: block;
   width: 24px;
   overflow: hidden;
   text-align: center;
 }
 
-.schema-table__th-menu__sub-menu {
+.mig-schema-table__th-menu__sub-menu {
   background-color: white;
   border: 1px solid #ddd;
   z-index: 99999;
 }
 
-.schema-table-menu {
+.mig-schema-table-menu {
   font-size: 14px;
   list-style: none outside;
   padding: 0;
   margin: 0;
 }
-.schema-table-menu li {
+.mig-schema-table-menu li {
   display: flex;
   border: 1px solid #ddd;
   align-items: center;
   cursor: pointer;
 }
-.schema-table-menu li .react-datepicker {
+.mig-schema-table-menu li .react-datepicker {
   width: 20.5rem;
 }
-.schema-table-menu li:hover {
+.mig-schema-table-menu li:hover {
   background-color: #eff6fb;
 }
 
-.schema-table__td {
+.mig-schema-table__td {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -183,17 +184,17 @@
   padding-right: 8px;
   align-content: center;
 }
-.schema-table__td--odd {
+.mig-schema-table__td--odd {
   background-color: var(--bs-gray-100, #f8f9fa);
 }
-.schema-table__td--even {
+.mig-schema-table__td--even {
   background-color: var(--bs-white, #fff);
 }
-.schema-table__td--selected {
+.mig-schema-table__td--selected {
   background-color: var(--bs-gray-300, #dee2e6);
 }
 
-.schema-table__column_resizer {
+.mig-schema-table__column_resizer {
   position: absolute;
   top: 0;
   user-select: none;
@@ -201,7 +202,7 @@
   cursor: e-resize;
   width: 3px;
 }
-.schema-table__column_resizer--dragged, .schema-table__column_resizer:hover {
+.mig-schema-table__column_resizer--dragged, .mig-schema-table__column_resizer:hover {
   background-color: #bbb;
   bottom: 0 !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.120",
+  "version": "3.0.122",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -30,12 +30,15 @@
     "build": "rm -rf dist; tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
     "prepublishOnly": "npm run build",
     "start": "react-scripts start",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ]
   },
   "browserslist": {
@@ -51,6 +54,16 @@
     ]
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/preset-create-react-app": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-webpack5": "^8.0.8",
+    "@storybook/test": "^8.0.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/date-fns": "^2.6.0",
@@ -58,9 +71,13 @@
     "@types/node": "^20.12.5",
     "@types/react-window": "^1.8.5",
     "axios": "^1.4.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
     "react-router-dom": "^6.11.2",
     "sass": "^1.62.1",
-    "typescript": "^4.9.5"
+    "storybook": "^8.0.8",
+    "typescript": "^4.9.5",
+    "webpack": "^5.91.0"
   }
 }