mig-schema-table 3.0.70 → 3.0.72

package/dist/SchemaTable/index.d.ts

@@ -28,6 +28,7 @@ export interface ISchemaTableProps<T> {
     getRowClassName?: (rowData: T, dataIndex: number, filteredSortedData: IRenderData[]) => string;
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
     isColumnFilterable?: boolean;
+    isExportable?: boolean;
     isSearchable?: boolean;
     isSortable?: boolean;
     maxHeight?: number;
@@ -47,6 +48,6 @@ export interface IDateColumnFilterValue {
     filterEmpty?: true;
 }
 export type TColumnFilterValue = string | number | boolean | IDateColumnFilterValue;
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { VariableSizeGrid, VariableSizeList } from "react-window";
@@ -9,6 +20,8 @@ import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
 import { parseLocationHash, serializeLocationHash } from "../inc/data";
 import SchemaTableTh, { EColumnFilterStatus } from "./SchemaTableTh";
 import SchemaTableThMenu from "./SchemaTableThMenu";
+import { saveAs } from "file-saver";
+import { unparse } from "papaparse";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 function getSortByValue(propSchema, propConfig) {
     var _a;
@@ -28,7 +41,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
     return !!(isTableSortable &&
         (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
 }
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, useFilterStateHash, width, }) {
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [schemaTableThMenuConfig, setSchemaTableThMenuConfig] = React.useState();
@@ -324,6 +337,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             if (x === y) {
                 return 0;
             }
+            if (!x) {
+                return sortAsc ? -1 : 1;
+            }
+            if (!y) {
+                return sortAsc ? 1 : -1;
+            }
             return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
         });
     }, [
@@ -524,7 +543,22 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery }));
         }
     }, [locationHash, searchQuery, useFilterStateHash]);
-    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", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, _jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))] })), _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: ConfiguredSchemaTableTh }), `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: {
+    const onExportDataClick = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!sortedRenderData) {
+            return;
+        }
+        saveAs(new Blob([
+            unparse(sortedRenderData.map((row) => {
+                const { _index, SELECT_ALL_COLUMN_NAME } = row, data = __rest(row, ["_index", "SELECT_ALL_COLUMN_NAME"]);
+                return data;
+            })),
+        ], {
+            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", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, 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: ConfiguredSchemaTableTh }), `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/inc/string.d.ts

@@ -1,4 +1,2 @@
 export declare function uncamel(camel: string): string;
-export declare function t(key: string, db?: {
-    [key: string]: string;
-}): string;
+export declare function t(key: string, ...args: any[]): string;

package/dist/inc/string.js

@@ -15,11 +15,16 @@ export function uncamel(camel) {
         return ` ${nextIsUppercase ? letter : letter.toLowerCase()}`;
     }));
 }
-export function t(key, db = {
+const db = {
     "Europe/Amsterdam": "AMS",
     "Europe/Berlin": "AMS",
     "Asia/Jakarta": "JKT",
     "Asia/Bangkok": "JKT",
-}) {
-    return db[key] || uncamel(key);
+};
+export function t(key, ...args) {
+    let string = db[key] || uncamel(key);
+    args.forEach((arg, index) => {
+        string = string.replace(`{${index}}`, arg);
+    });
+    return string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.70",
+  "version": "3.0.72",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -8,15 +8,19 @@
   "types": "./dist/index.d.ts",
   "private": false,
   "dependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.31",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.2.6",
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "openapi3-ts": "^4.1.2",
+    "papaparse": "^5.4.1",
     "react": "^18.2.0",
     "react-datepicker": "^4.14.0",
     "react-dom": "^18.2.0",