@vuu-ui/vuu-table-extras 2.1.19-beta.1 → 2.1.19-beta.2

package/src/csv-upload/parse/csv-schema-validation.js

@@ -0,0 +1,45 @@
+import { getTypedValue } from "@vuu-ui/vuu-utils";
+import { CsvValidationErrorEnum, addCsvFileError, addCsvRowError, createCsvErrorState } from "./csv-errors.js";
+import { CSV_FIRST_DATA_ROW_NUMBER } from "./csv-constants.js";
+const MAX_ROWS_IN_CSV = 25000;
+const validateCsvAgainstSchema = (parsed, tableSchema, options)=>{
+    const schemaColumns = new Map(tableSchema.columns.map((col)=>[
+            col.name,
+            col.serverDataType
+        ]));
+    const maxRows = options?.maxRows ?? MAX_ROWS_IN_CSV;
+    const errorState = createCsvErrorState();
+    if (!parsed.header.includes(tableSchema.key)) addCsvFileError(errorState, tableSchema.key, CsvValidationErrorEnum.MISSING_KEY_COLUMN, `CSV must include key column '${tableSchema.key}'.`);
+    parsed.header.forEach((column)=>{
+        if (!schemaColumns.has(column)) addCsvFileError(errorState, column, CsvValidationErrorEnum.UNKNOWN_COLUMN, "Column is not present in table schema.", column);
+    });
+    if (parsed.rows.length > maxRows) addCsvFileError(errorState, "*", CsvValidationErrorEnum.MAX_ROWS_EXCEEDED, `CSV row count ${parsed.rows.length} exceeds maxRows ${maxRows}.`, String(parsed.rows.length));
+    const typedRows = [];
+    parsed.rows.forEach((rowValues, rowIndex)=>{
+        const rowNum = rowIndex + CSV_FIRST_DATA_ROW_NUMBER;
+        const typedRow = {};
+        parsed.header.forEach((columnName, columnIndex)=>{
+            const rawValue = rowValues[columnIndex];
+            const schemaType = schemaColumns.get(columnName);
+            if (0 === rawValue.length && "string" !== schemaType) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.EMPTY_NON_STRING_VALUE, "Empty value is not allowed for non-string columns.", rawValue);
+            let value;
+            const toType = schemaType ?? "string";
+            try {
+                value = getTypedValue(rawValue, toType);
+            } catch (err) {
+                addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, err instanceof Error ? err.message : String(err), rawValue);
+                return;
+            }
+            if (void 0 === value) return void addCsvRowError(errorState, rowNum, columnName, CsvValidationErrorEnum.TYPE_MISMATCH, `Value '${rawValue}' is not a valid ${toType}`, rawValue);
+            typedRow[columnName] = value;
+        });
+        typedRows.push(typedRow);
+    });
+    return {
+        columns: parsed.header,
+        errorMap: errorState.errorMap,
+        errors: errorState.errors,
+        rows: typedRows
+    };
+};
+export { CsvValidationErrorEnum, validateCsvAgainstSchema };

package/src/csv-upload/parse/csv-upload-utils.js

@@ -0,0 +1,59 @@
+import { isRpcError } from "@vuu-ui/vuu-utils";
+import { CSV_FIRST_DATA_ROW_NUMBER } from "./csv-constants.js";
+const isRecord = (value)=>"object" == typeof value && null !== value;
+const toErrorMessage = (error)=>error instanceof Error ? error.message : String(error);
+const isCsvParseError = (value)=>isRecord(value) && "message" in value && "string" == typeof value.message && "errors" in value && Array.isArray(value.errors) && "errorMap" in value && isRecord(value.errorMap);
+const hasFileParseErrors = (parseError)=>Object.keys(parseError.errorMap.fileErrors).length > 0;
+const createUploadError = (source, message, parseError, validationError)=>({
+        message,
+        parseError,
+        validationError,
+        source
+    });
+const mergeValidationWithParseErrors = (schemaValidation, parseError)=>parseError ? {
+        ...schemaValidation,
+        errors: [
+            ...schemaValidation.errors,
+            ...toValidationErrorsFromParseRowErrors(parseError)
+        ],
+        parseRowError: parseError
+    } : schemaValidation;
+const buildRowErrorMessage = (prefix, rowErrors)=>{
+    const details = rowErrors.slice(0, 8).join("; ");
+    const remaining = rowErrors.length - 8;
+    const suffix = remaining > 0 ? `; and ${remaining} more` : "";
+    return `${prefix} for ${rowErrors.length} row(s): ${details}${suffix}`;
+};
+const toValidationErrorsFromParseRowErrors = (parseError)=>parseError.errors.filter((error)=>error.rowNum >= CSV_FIRST_DATA_ROW_NUMBER);
+const normalizeTableData = (value, fallback)=>{
+    const tableData = isRecord(value) && "data" in value ? value.data : value;
+    if (!isRecord(tableData)) return fallback;
+    const columns = tableData.columns;
+    const rows = tableData.rows;
+    if (!Array.isArray(columns) || columns.some((column)=>"string" != typeof column) || !Array.isArray(rows)) return fallback;
+    return {
+        columns,
+        rows: rows.map((row)=>{
+            if (Array.isArray(row)) return row;
+            if (!isRecord(row)) return columns.map(()=>"");
+            return columns.map((column)=>row[column] ?? "");
+        })
+    };
+};
+const executeBatchRpcCalls = async (items, executor, errorFormatter)=>{
+    const errors = [];
+    const results = [];
+    for (const item of items)try {
+        const result = await executor(item);
+        const rpcResult = result;
+        if (isRpcError(rpcResult)) errors.push(errorFormatter(item, rpcResult.errorMessage));
+        else results.push(result);
+    } catch (err) {
+        errors.push(errorFormatter(item, toErrorMessage(err)));
+    }
+    return {
+        errors,
+        results
+    };
+};
+export { buildRowErrorMessage, createUploadError, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors };

package/src/csv-upload/parse/index.js

@@ -0,0 +1,5 @@
+export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER } from "./csv-constants.js";
+export { CsvParseErrorEnum, CsvValidationErrorEnum, addCsvFileError, addCsvRowError, createCsvErrorState, hasCsvErrors } from "./csv-errors.js";
+export { parseCsv } from "./csv-parse.js";
+export { validateCsvAgainstSchema } from "./csv-schema-validation.js";
+export { buildRowErrorMessage, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors } from "./csv-upload-utils.js";

package/src/csv-upload/useCsvUpload.js

@@ -0,0 +1,260 @@
+import { isRpcSuccess, isSessionTable } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { parseCsv } from "./parse/csv-parse.js";
+import { validateCsvAgainstSchema } from "./parse/csv-schema-validation.js";
+import { buildRowErrorMessage, createUploadError, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage } from "./parse/csv-upload-utils.js";
+import { CSV_FIRST_DATA_ROW_NUMBER } from "./parse/csv-constants.js";
+const useCsvUpload = ({ dataSource, onEditSessionEnded, onEditSessionStarted, onError, onImported, onProcessingStarted, maxRows, parseOptions })=>{
+    const [validation, setValidation] = useState();
+    const [sessionTable, setSessionTable] = useState();
+    const [isProcessingFile, setIsProcessingFile] = useState(false);
+    const [isImporting, setIsImporting] = useState(false);
+    const sessionTableRef = useRef(void 0);
+    const setActiveSessionTable = useCallback((table)=>{
+        sessionTableRef.current = table;
+        if (table) {
+            const sessionDs = dataSource.createSessionDataSource?.(table);
+            if (sessionDs) onEditSessionStarted?.(sessionDs);
+        }
+        setSessionTable(table);
+    }, [
+        dataSource,
+        onEditSessionStarted
+    ]);
+    const endEditSessionAndNotify = useCallback(async (save, reason)=>{
+        if (!dataSource.endEditSession) throw Error("CsvUpload requires datasource endEditSession support.");
+        const currentSessionTable = sessionTableRef.current;
+        const result = await dataSource.endEditSession(save);
+        setActiveSessionTable(void 0);
+        onEditSessionEnded?.({
+            reason,
+            sessionTable: currentSessionTable
+        });
+        return result;
+    }, [
+        dataSource,
+        onEditSessionEnded,
+        setActiveSessionTable
+    ]);
+    const table = dataSource.table;
+    const schema = dataSource.tableSchema;
+    const addAllRows = useCallback(async (mergedValidation)=>{
+        if (void 0 === table) throw Error("CsvUpload requires dataSource.table to be defined.");
+        const vuuMsgByRow = new Map();
+        for (const { rowNum, column, message } of mergedValidation.errors){
+            if (rowNum < CSV_FIRST_DATA_ROW_NUMBER) continue;
+            const existing = vuuMsgByRow.get(rowNum);
+            const columnError = `${column}: ${message}`;
+            vuuMsgByRow.set(rowNum, existing ? `${existing}; ${columnError}` : `Row ${rowNum}: ${columnError}`);
+        }
+        const parsedRowCount = mergedValidation.rows.length;
+        const unparsedErrorRows = [
+            ...vuuMsgByRow.keys()
+        ].filter((rowNum)=>rowNum - CSV_FIRST_DATA_ROW_NUMBER >= parsedRowCount).map((rowNum)=>({
+                rowNum,
+                rowData: {},
+                vuuMsg: vuuMsgByRow.get(rowNum) ?? ""
+            }));
+        const allRows = [
+            ...mergedValidation.rows.map((rowData, idx)=>({
+                    rowNum: idx + CSV_FIRST_DATA_ROW_NUMBER,
+                    rowData: rowData ?? {},
+                    vuuMsg: vuuMsgByRow.get(idx + CSV_FIRST_DATA_ROW_NUMBER) ?? ""
+                })),
+            ...unparsedErrorRows
+        ];
+        const { errors: rpcErrors } = await executeBatchRpcCalls(allRows, async ({ rowNum, rowData, vuuMsg })=>{
+            const payload = {
+                ...rowData,
+                rowNum,
+                vuuMsg
+            };
+            const result = await dataSource.rpcRequest?.({
+                type: "RPC_REQUEST",
+                rpcName: "addRow",
+                params: {
+                    key: String(rowNum),
+                    data: payload
+                }
+            });
+            if (!isRpcSuccess(result)) {
+                const msg = result && "errorMessage" in result ? String(result.errorMessage) : "addRow RPC failed";
+                throw Error(msg);
+            }
+            return result;
+        }, ({ rowNum }, error)=>`Row ${rowNum}: ${error}`);
+        if (rpcErrors.length > 0) {
+            const errorMessage = buildRowErrorMessage("Import failed", rpcErrors);
+            const errors = {
+                importError: createUploadError("import", errorMessage)
+            };
+            onError?.({
+                errors
+            });
+        }
+    }, [
+        dataSource,
+        onError,
+        table
+    ]);
+    const beginEditSession = useCallback(async ()=>{
+        if (!dataSource.beginEditSession) throw Error("CsvUpload requires datasource beginEditSession support.");
+        const sessionDataSource = await dataSource.beginEditSession("empty-session-table");
+        const sessionVuuTable = sessionDataSource?.table;
+        if (sessionVuuTable && isSessionTable(sessionVuuTable)) setActiveSessionTable(sessionVuuTable);
+    }, [
+        dataSource,
+        setActiveSessionTable
+    ]);
+    const closePendingEditSession = useCallback(async (save)=>{
+        if (void 0 === sessionTableRef.current) return;
+        await endEditSessionAndNotify(save, save ? "saved" : "discarded");
+    }, [
+        endEditSessionAndNotify
+    ]);
+    const processFile = useCallback(async (file)=>{
+        setValidation(void 0);
+        onError?.(void 0);
+        await closePendingEditSession(false);
+        if (void 0 === schema) throw Error("Table schema is not yet available.");
+        if (void 0 === table) throw Error("CsvUpload requires dataSource.table to be defined.");
+        const parsedCsv = parseCsv(await file.text(), parseOptions);
+        if (parsedCsv.error && hasFileParseErrors(parsedCsv.error)) {
+            setValidation(void 0);
+            onError?.({
+                errors: {
+                    validationError: createUploadError("validation", `Validation failed: ${parsedCsv.error.message}`, parsedCsv.error)
+                }
+            });
+            return;
+        }
+        const schemaValidation = validateCsvAgainstSchema(parsedCsv, schema, {
+            maxRows
+        });
+        if (Object.keys(schemaValidation.errorMap.fileErrors).length > 0) {
+            setValidation(schemaValidation);
+            onError?.({
+                errors: {
+                    schemaError: createUploadError("schema", "CSV validation failed.", parsedCsv.error, {
+                        errorMap: schemaValidation.errorMap,
+                        errors: schemaValidation.errors,
+                        message: "CSV validation failed."
+                    })
+                }
+            });
+            return;
+        }
+        const mergedValidation = mergeValidationWithParseErrors(schemaValidation, parsedCsv.error);
+        setValidation(mergedValidation);
+        if (mergedValidation.rows.length > 0) {
+            await beginEditSession();
+            try {
+                await addAllRows(mergedValidation);
+            } catch (error) {
+                await endEditSessionAndNotify(false, "failed");
+                setValidation(void 0);
+                onError?.({
+                    errors: {
+                        importError: createUploadError("import", `RPC import failed: ${toErrorMessage(error)}`)
+                    }
+                });
+            }
+        }
+    }, [
+        onError,
+        addAllRows,
+        maxRows,
+        parseOptions,
+        beginEditSession,
+        closePendingEditSession,
+        table,
+        endEditSessionAndNotify,
+        schema
+    ]);
+    const handleFiles = useCallback(async (files)=>{
+        const file = files[0];
+        if (void 0 === file) return;
+        setIsProcessingFile(true);
+        onProcessingStarted?.();
+        try {
+            await processFile(file);
+        } catch (err) {
+            setValidation(void 0);
+            setActiveSessionTable(void 0);
+            const parseError = isCsvParseError(err) ? err : void 0;
+            const errorMessage = parseError ? `Validation failed: ${parseError.message}` : `Validation failed: ${toErrorMessage(err)}`;
+            const errors = {
+                errors: {
+                    validationError: createUploadError("validation", errorMessage, parseError)
+                }
+            };
+            onError?.(errors);
+        } finally{
+            setIsProcessingFile(false);
+        }
+    }, [
+        onError,
+        onProcessingStarted,
+        processFile,
+        setActiveSessionTable
+    ]);
+    const onDrop = useCallback((_event, files)=>{
+        handleFiles(files);
+    }, [
+        handleFiles
+    ]);
+    const onTriggerChange = useCallback((_event, files)=>{
+        handleFiles(files);
+    }, [
+        handleFiles
+    ]);
+    const canImport = useMemo(()=>void 0 !== validation && 0 === validation.errors.length && validation.rows.length > 0 && !isProcessingFile && !isImporting, [
+        isImporting,
+        isProcessingFile,
+        validation
+    ]);
+    const importData = useCallback(async ()=>{
+        if (!canImport || void 0 === validation) return;
+        setIsImporting(true);
+        onError?.(void 0);
+        try {
+            const rpcResult = await endEditSessionAndNotify(true, "saved");
+            const fallbackTableData = {
+                columns: validation.columns,
+                rows: validation.rows.map((row)=>validation.columns.map((column)=>row[column] ?? ""))
+            };
+            onImported?.({
+                rpcResult,
+                tableData: normalizeTableData(rpcResult, fallbackTableData)
+            });
+        } catch (err) {
+            const errorMessage = `RPC import failed: ${String(err)}`;
+            const errors = {
+                errors: {
+                    importError: createUploadError("import", errorMessage)
+                }
+            };
+            onError?.(errors);
+        } finally{
+            setIsImporting(false);
+        }
+    }, [
+        canImport,
+        endEditSessionAndNotify,
+        onError,
+        onImported,
+        validation
+    ]);
+    return {
+        canImport,
+        importData,
+        isImporting,
+        isProcessingFile,
+        onDrop,
+        onTriggerChange,
+        sessionTable,
+        schema,
+        validation
+    };
+};
+export { useCsvUpload };

package/src/csv-upload/useCsvUploadSessionPreview.js

@@ -0,0 +1,70 @@
+import { useData } from "@vuu-ui/vuu-utils";
+import { useEffect, useState } from "react";
+const useCsvUploadSessionPreview = (sessionTable)=>{
+    const { VuuDataSource, getServerAPI } = useData();
+    const [previewConfig, setPreviewConfig] = useState();
+    const [previewDataSource, setPreviewDataSource] = useState();
+    const [previewError, setPreviewError] = useState();
+    const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+    useEffect(()=>{
+        let cancelled = false;
+        if (!sessionTable) {
+            setPreviewDataSource(void 0);
+            setPreviewConfig(void 0);
+            setPreviewError(void 0);
+            setIsLoadingPreview(false);
+            return;
+        }
+        const loadSessionTablePreview = async ()=>{
+            setIsLoadingPreview(true);
+            setPreviewError(void 0);
+            try {
+                const server = await getServerAPI();
+                const schema = await server.getTableSchema(sessionTable);
+                if (cancelled) return;
+                const columnDescriptors = schema.columns.map(({ name, serverDataType })=>"vuuMsg" === name ? {
+                        name,
+                        serverDataType,
+                        width: 300,
+                        label: "Error"
+                    } : {
+                        name,
+                        serverDataType
+                    });
+                setPreviewConfig({
+                    columns: columnDescriptors,
+                    zebraStripes: true,
+                    rowSeparators: true,
+                    columnSeparators: true
+                });
+                setPreviewDataSource(new VuuDataSource({
+                    columns: columnDescriptors.map(({ name })=>name),
+                    table: sessionTable
+                }));
+            } catch (error) {
+                if (!cancelled) {
+                    setPreviewDataSource(void 0);
+                    setPreviewConfig(void 0);
+                    setPreviewError(`Failed to load session table preview: ${String(error)}`);
+                }
+            } finally{
+                if (!cancelled) setIsLoadingPreview(false);
+            }
+        };
+        loadSessionTablePreview();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        VuuDataSource,
+        getServerAPI,
+        sessionTable
+    ]);
+    return {
+        isLoadingPreview,
+        previewConfig,
+        previewDataSource,
+        previewError
+    };
+};
+export { useCsvUploadSessionPreview };

package/src/datasource-stats/DatasourceStats.css.js

@@ -0,0 +1,56 @@
+const css = `
+.vuuDatasourceStats {
+  --datasourceStats-background: var(--vuuDatasourceStats-background);
+  background: var(--datasourceStats-background, var(--salt-container-secondary-background));
+  font-size: var(--vuuDatasourceStats-fontSize, 10px);
+  align-items: center;
+  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));
+  height: var(--vuuDatasourceStats-height, 100%);
+  padding: 0 var(--salt-spacing-200);
+  grid-template: "panel-start panel-center panel-end"
+  / 1fr 1fr 1fr;
+  display: grid;
+
+  &.vuuDatasourceStats-withSelection {
+    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));
+  }
+
+  & .vuuDatasourceStats-statsPanel {
+    align-items: center;
+    gap: var(--salt-spacing-100);
+    width: fit-content;
+    display: flex;
+  }
+
+  & .vuuDatasourceStats-rowStats {
+    grid-area: panel-start;
+    justify-self: flex-start;
+  }
+
+  & .vuuDatasourceStats-selected {
+    margin-left: var(--salt-spacing-100);
+  }
+
+  & .vuuDatasourceStats-label {
+    color: var(--salt-content-secondary-foreground);
+    white-space: nowrap;
+  }
+
+  & .vuuDatasourceStats-range {
+    white-space: nowrap;
+  }
+
+  & .vuuDatasourceStats-value {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  & .vuuDatasourceStats-tooltray {
+    margin: 0 var(--salt-spacing-200);
+    grid-area: panel-end;
+    justify-self: end;
+  }
+}
+
+
+`;
+export default css;

package/src/datasource-stats/DatasourceStats.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useDatasourceStats } from "./useDatasourceStats.js";
+import DatasourceStats from "./DatasourceStats.css";
+const classBase = "vuuDatasourceStats";
+const numberFormatter = new Intl.NumberFormat();
+const DataSourceStats = ({ children, className, dataSource, showRowStats = true, tooltrayActions, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-datasource-stats",
+        css: DatasourceStats,
+        window: targetWindow
+    });
+    const { range, selectedCount, size } = useDatasourceStats({
+        dataSource,
+        showRowStats
+    });
+    const from = numberFormatter.format(range.from + 1);
+    const to = numberFormatter.format(Math.min(range.to, size));
+    const value = numberFormatter.format(size);
+    if (0 === size) return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsx("span", {
+            className: `${classBase}-label`,
+            children: "No Rows to display"
+        })
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className, {
+            [`${classBase}-withSelection`]: selectedCount > 0
+        }),
+        children: [
+            showRowStats ? /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-statsPanel ${classBase}-rowStats`,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-label`,
+                        children: "Row count"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: `${classBase}-range`,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: `${classBase}-value`,
+                                children: from
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: `${classBase}-label`,
+                                children: "-"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: `${classBase}-value`,
+                                children: to
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-label`,
+                        children: "of"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-value`,
+                        children: value
+                    }),
+                    selectedCount > 0 ? /*#__PURE__*/ jsx("span", {
+                        className: clsx(`${classBase}-label`, `${classBase}-selected`),
+                        children: `${selectedCount.toLocaleString()} selected`
+                    }) : null
+                ]
+            }) : null,
+            selectedCount > 0 ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-statsPanel ${classBase}-selectionActions`,
+                children: children
+            }) : null,
+            tooltrayActions ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-statsPanel ${classBase}-tooltray`,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: `${classBase}-actions`,
+                    children: tooltrayActions
+                })
+            }) : null
+        ]
+    });
+};
+export { DataSourceStats };

package/src/datasource-stats/useDatasourceStats.js

@@ -0,0 +1,48 @@
+import { formatDate } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const timeFormatter = formatDate({
+    time: "hh:mm:ss"
+});
+const formatTime = (ts)=>{
+    if ("number" == typeof ts) return timeFormatter(new Date(ts));
+};
+const useDatasourceStats = ({ dataSource })=>{
+    const [selectedCount, setSelectedCount] = useState(0);
+    const [range, setRange] = useState(dataSource.range);
+    const [size, setSize] = useState(dataSource.size);
+    const [freezeTime, setFreezeTime] = useState(formatTime(dataSource.freezeTimestamp));
+    const handleFreeze = useCallback((isFrozen, freezeTimestamp)=>{
+        isFrozen ? setFreezeTime(formatTime(freezeTimestamp)) : setFreezeTime(void 0);
+    }, []);
+    const handleRowSelection = useCallback((count)=>{
+        setSelectedCount(count);
+    }, []);
+    const handleSize = useCallback((size)=>{
+        setSize(size);
+    }, []);
+    useMemo(()=>{
+        setSize(dataSource.size);
+        dataSource.on("resize", handleSize);
+        dataSource.on("range", setRange);
+        dataSource.on("freeze", handleFreeze);
+        dataSource.on("row-selection", handleRowSelection);
+        return ()=>{
+            dataSource.removeListener("resize", handleSize);
+            dataSource.removeListener("range", setRange);
+            dataSource.removeListener("freeze", handleFreeze);
+            dataSource.removeListener("row-selection", handleRowSelection);
+        };
+    }, [
+        dataSource,
+        handleFreeze,
+        handleRowSelection,
+        handleSize
+    ]);
+    return {
+        range,
+        selectedCount,
+        size,
+        freezeTime
+    };
+};
+export { useDatasourceStats };