@bsol-oss/react-datatable5 12.0.0-beta.7 → 12.0.0-beta.9

package/dist/index.d.ts

@@ -441,6 +441,11 @@ interface GetColumnsConfigs<K extends RowData> {
 declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
 declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
+interface TableDataDisplayProps {
+    colorPalette?: string;
+}
+declare const TableDataDisplay: ({ colorPalette }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
+
 interface FilterOptionsProps {
     column: string;
 }
@@ -612,4 +617,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js

@@ -2829,6 +2829,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data,
         }, children: children }));
 }
 
@@ -2912,6 +2913,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data: query.data?.data ?? [],
         }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3518,6 +3520,66 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
+const TableDataDisplay = ({ colorPalette }) => {
+    const { table, columns, translate, data } = useDataTableContext();
+    const columnDef = table._getColumnDefs();
+    console.log(columnDef, "glp");
+    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+    const columnsMap = Object.fromEntries(columns.map((def) => {
+        const { accessorKey, id } = def;
+        if (accessorKey) {
+            return [accessorKey, def];
+        }
+        return [id, def];
+    }));
+    const columnHeaders = Object.keys(columnsMap);
+    const totalWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return 0;
+        }
+        if (typeof size === "number") {
+            return size;
+        }
+        return 0;
+    })
+        .reduce((previous, current) => previous + current, 0);
+    const columnWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return "1fr";
+        }
+        return `minmax(${size}px, ${(size / totalWidths) * 100}%)`;
+    })
+        .join(" ");
+    console.log({ columnWidths }, "hadfg");
+    const cellProps = {
+        flex: "1 0 0%",
+        overflow: "auto",
+        paddingX: "2",
+        py: "1",
+        borderBottomColor: { base: "colorPalette.200", _dark: "colorPalette.800" },
+        borderBottomWidth: "1px",
+        ...{ colorPalette },
+    };
+    return (jsxRuntime.jsxs(react.Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: [jsxRuntime.jsx(react.Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: columnHeaders.map((header) => {
+                    return (jsxRuntime.jsx(react.Box, { flex: "1 0 0%", paddingX: "2", py: "1", overflow: "auto", textOverflow: "ellipsis", children: translate.t(`column_header.${header}`) }));
+                }) }), data.map((record) => {
+                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnHeaders.map((header) => {
+                        if (!!record === false) {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (!!record[header] === false) {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (typeof record[header] === "object") {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: record[header] }) }));
+                        }
+                        return jsxRuntime.jsx(react.Box, { ...cellProps, children: record[header] ?? "" });
+                    }) }));
+            })] }));
+};
+
 const AccordionItemTrigger = React__namespace.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsxRuntime.jsx(lu.LuChevronDown, {}) })), jsxRuntime.jsx(react.HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: jsxRuntime.jsx(lu.LuChevronDown, {}) }))] }));
@@ -5135,6 +5197,7 @@ exports.TableCardContainer = TableCardContainer;
 exports.TableCards = TableCards;
 exports.TableComponent = TableComponent;
 exports.TableControls = TableControls;
+exports.TableDataDisplay = TableDataDisplay;
 exports.TableFilter = TableFilter;
 exports.TableFilterTags = TableFilterTags;
 exports.TableFooter = TableFooter;

package/dist/index.mjs

@@ -2809,6 +2809,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data,
         }, children: children }));
 }
 
@@ -2892,6 +2893,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data: query.data?.data ?? [],
         }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3498,6 +3500,66 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
+const TableDataDisplay = ({ colorPalette }) => {
+    const { table, columns, translate, data } = useDataTableContext();
+    const columnDef = table._getColumnDefs();
+    console.log(columnDef, "glp");
+    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+    const columnsMap = Object.fromEntries(columns.map((def) => {
+        const { accessorKey, id } = def;
+        if (accessorKey) {
+            return [accessorKey, def];
+        }
+        return [id, def];
+    }));
+    const columnHeaders = Object.keys(columnsMap);
+    const totalWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return 0;
+        }
+        if (typeof size === "number") {
+            return size;
+        }
+        return 0;
+    })
+        .reduce((previous, current) => previous + current, 0);
+    const columnWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return "1fr";
+        }
+        return `minmax(${size}px, ${(size / totalWidths) * 100}%)`;
+    })
+        .join(" ");
+    console.log({ columnWidths }, "hadfg");
+    const cellProps = {
+        flex: "1 0 0%",
+        overflow: "auto",
+        paddingX: "2",
+        py: "1",
+        borderBottomColor: { base: "colorPalette.200", _dark: "colorPalette.800" },
+        borderBottomWidth: "1px",
+        ...{ colorPalette },
+    };
+    return (jsxs(Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: [jsx(Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: columnHeaders.map((header) => {
+                    return (jsx(Box, { flex: "1 0 0%", paddingX: "2", py: "1", overflow: "auto", textOverflow: "ellipsis", children: translate.t(`column_header.${header}`) }));
+                }) }), data.map((record) => {
+                return (jsx(Fragment, { children: columnHeaders.map((header) => {
+                        if (!!record === false) {
+                            return (jsx(Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (!!record[header] === false) {
+                            return (jsx(Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (typeof record[header] === "object") {
+                            return (jsx(Box, { ...cellProps, children: jsx(RecordDisplay, { object: record[header] }) }));
+                        }
+                        return jsx(Box, { ...cellProps, children: record[header] ?? "" });
+                    }) }));
+            })] }));
+};
+
 const AccordionItemTrigger = React.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxs(Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsx(Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsx(LuChevronDown, {}) })), jsx(HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsx(Accordion.ItemIndicator, { children: jsx(LuChevronDown, {}) }))] }));
@@ -5084,4 +5146,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FilterOptions, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FilterOptions, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/types/components/DataTable/display/TableDataDisplay.d.ts

@@ -1 +1,4 @@
-export declare const TableDataDisplay: () => import("react/jsx-runtime").JSX.Element;
+export interface TableDataDisplayProps {
+    colorPalette?: string;
+}
+export declare const TableDataDisplay: ({ colorPalette }: TableDataDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -94,6 +94,7 @@ export * from "./components/DataTable/display/TextCell";
 export * from "./components/DataTable/useDataTable";
 export * from "./components/DataTable/useDataTableServer";
 export * from "./components/DataTable/utils/getColumns";
+export * from "./components/DataTable/display/TableDataDisplay";
 export * from "./components/Filter/FilterOptions";
 export * from "./components/Filter/GlobalFilter";
 export * from "./components/Form/components/core/DefaultForm";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.7",
+  "version": "12.0.0-beta.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",