@rufous/ui 0.2.90 → 0.2.91

package/dist/main.cjs

@@ -4305,7 +4305,9 @@ function DataGrid({
   className,
   sx,
   onRowDoubleClick,
-  onCellDoubleClick
+  onCellDoubleClick,
+  headerActions,
+  toolbarContent
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = (0, import_react23.useState)(null);
@@ -4626,6 +4628,7 @@ function DataGrid({
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
+  const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
   return /* @__PURE__ */ import_react23.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react23.default.createElement("h2", null, title), /* @__PURE__ */ import_react23.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react23.default.createElement(
     "input",
     {
@@ -4651,7 +4654,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
-  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);

package/dist/main.css

@@ -326,8 +326,7 @@
   color: var(--text-color);
 }
 .dg-header {
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color);
+  padding: 20px 24px 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -351,6 +350,32 @@
   gap: 10px;
   flex-wrap: wrap;
 }
+.dg-header-slot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dg-toolbar {
+  padding: 10px 24px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dg-slot--left,
+.dg-toolbar.dg-slot--left {
+  justify-content: flex-start;
+}
+.dg-slot--center,
+.dg-toolbar.dg-slot--center {
+  justify-content: center;
+  flex: 1;
+}
+.dg-slot--right,
+.dg-toolbar.dg-slot--right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
 .dg-search-wrap {
   position: relative;
 }
@@ -413,6 +438,8 @@
   background: var(--hover-color);
 }
 .dg-table-wrap {
+  border-top: 2px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
   overflow-x: auto;
   flex: 1;
 }

package/dist/main.d.cts

@@ -819,6 +819,10 @@ interface Action<T> {
     color?: string;
     show?: (item: T) => boolean;
 }
+interface DataGridToolbarSlot {
+    content: React__default.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
@@ -834,11 +838,15 @@ interface DataGridProps<T> {
         field: string;
         value: any;
     }) => void;
+    /** Extra buttons/components rendered beside the Export button in the header row */
+    headerActions?: DataGridToolbarSlot;
+    /** Extra content rendered in a second row below the header */
+    toolbarContent?: DataGridToolbarSlot;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;

package/dist/main.d.ts

@@ -819,6 +819,10 @@ interface Action<T> {
     color?: string;
     show?: (item: T) => boolean;
 }
+interface DataGridToolbarSlot {
+    content: React__default.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
@@ -834,11 +838,15 @@ interface DataGridProps<T> {
         field: string;
         value: any;
     }) => void;
+    /** Extra buttons/components rendered beside the Export button in the header row */
+    headerActions?: DataGridToolbarSlot;
+    /** Extra content rendered in a second row below the header */
+    toolbarContent?: DataGridToolbarSlot;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;

package/dist/main.js

@@ -4175,7 +4175,9 @@ function DataGrid({
   className,
   sx,
   onRowDoubleClick,
-  onCellDoubleClick
+  onCellDoubleClick,
+  headerActions,
+  toolbarContent
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = useState9(null);
@@ -4496,6 +4498,7 @@ function DataGrid({
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
+  const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
   return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React75.createElement("h2", null, title), /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
@@ -4521,7 +4524,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.90",
+  "version": "0.2.91",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",