@bsol-oss/react-datatable5 12.0.0-beta.10 → 12.0.0-beta.11

package/dist/index.d.ts

@@ -443,8 +443,9 @@ declare const getColumns: <TData extends unknown>({ schema, include, ignore, wid
 
 interface TableDataDisplayProps {
     colorPalette?: string;
+    emptyComponent?: ReactNode;
 }
-declare const TableDataDisplay: ({ colorPalette }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
+declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
 
 interface FilterOptionsProps {
     column: string;

package/dist/index.js

@@ -3520,7 +3520,7 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
-const TableDataDisplay = ({ colorPalette }) => {
+const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
     const { table, columns, translate, data } = useDataTableContext();
     const columnDef = table._getColumnDefs();
     console.log(columnDef, "glp");
@@ -3562,6 +3562,9 @@ const TableDataDisplay = ({ colorPalette }) => {
         borderBottomWidth: "1px",
         ...{ colorPalette },
     };
+    if (data.length <= 0) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyComponent });
+    }
     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) => {

package/dist/index.mjs

@@ -3500,7 +3500,7 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
-const TableDataDisplay = ({ colorPalette }) => {
+const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
     const { table, columns, translate, data } = useDataTableContext();
     const columnDef = table._getColumnDefs();
     console.log(columnDef, "glp");
@@ -3542,6 +3542,9 @@ const TableDataDisplay = ({ colorPalette }) => {
         borderBottomWidth: "1px",
         ...{ colorPalette },
     };
+    if (data.length <= 0) {
+        return jsx(Fragment, { children: emptyComponent });
+    }
     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) => {

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

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

package/package.json

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