bolt-table 0.1.18 → 0.1.19

package/dist/index.d.mts

@@ -232,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -277,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -381,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody };

package/dist/index.d.ts

@@ -232,6 +232,10 @@ interface BoltTableProps<T extends DataRecord = DataRecord> {
     readonly layoutLoading?: boolean;
     /** Custom React node to render when the table has no data and is not loading. */
     readonly emptyRenderer?: React$1.ReactNode;
+    /** Returns a CSS class name for a given row based on its record and index. Useful for Tailwind or any CSS class-based conditional row styling. */
+    readonly rowClassName?: (record: T, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index. Useful for dynamic per-row styling. */
+    readonly rowStyle?: (record: T, index: number) => React$1.CSSProperties;
 }
 interface ClassNamesTypes {
     /** Applied to all non-pinned column header cells. */
@@ -277,7 +281,7 @@ interface StylesTypes {
     /** CSS color string for pinned column cells and headers background. */
     pinnedBg?: string;
 }
-declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function BoltTable<T extends DataRecord = DataRecord>({ columns: initialColumns, data, rowHeight, expandedRowHeight, maxExpandedRowHeight, accentColor, className, classNames, styles, gripIcon, hideGripIcon, icons, pagination, onPaginationChange, onColumnResize, onColumnOrderChange, onColumnPin, onColumnHide, rowSelection, rowPinning, onRowPin, expandable, rowKey, onEndReached, onEndReachedThreshold, isLoading, onSortChange, onFilterChange, columnContextMenuItems, autoHeight, layoutLoading, emptyRenderer, rowClassName, rowStyle, }: BoltTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DraggableHeaderProps {
     /** Column definition for this header cell. */
@@ -381,7 +385,11 @@ interface TableBodyProps {
     gridTemplateColumns?: string;
     /** Height of the column header row in pixels */
     headerHeight?: number;
+    /** Returns a CSS class name for a given row based on its record and index */
+    rowClassName?: (record: DataRecord, index: number) => string;
+    /** Returns inline CSS styles for a given row based on its record and index */
+    rowStyle?: (record: DataRecord, index: number) => React$1.CSSProperties;
 }
 declare const TableBody: React$1.FC<TableBodyProps>;
 
-export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, TableBody };
+export { BoltTable, type BoltTableIcons, type CellContextMenuItem, type ClassNamesTypes, type ColumnContextMenuItem, type ColumnType, type DataRecord, DraggableHeader, type ExpandableConfig, type PaginationType, ResizeOverlay, type RowPinningConfig, type RowSelectionConfig, type SortDirection, type StylesTypes, TableBody };

package/dist/index.js

@@ -1085,7 +1085,9 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1137,6 +1139,8 @@ var TableBody = ({
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
+            const rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
+            const rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "div",
               {
@@ -1144,12 +1148,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
@@ -1271,15 +1277,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1376,15 +1385,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1502,7 +1514,9 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  rowClassName,
+  rowStyle
 }) {
   const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
   const [columnOrder, setColumnOrder] = (0, import_react4.useState)(
@@ -2719,7 +2733,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]

package/dist/index.mjs

@@ -1051,7 +1051,9 @@ var TableBody = ({
   pinnedTopData = [],
   pinnedBottomData = [],
   gridTemplateColumns,
-  headerHeight = 36
+  headerHeight = 36,
+  rowClassName,
+  rowStyle
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
@@ -1103,6 +1105,8 @@ var TableBody = ({
             const cellValue = row[col.dataIndex];
             const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
             const recordFingerprint = hasRender && !isRowShimmer ? JSON.stringify(row) : void 0;
+            const rowCls = rowClassName ? rowClassName(row, virtualRow.index) : "";
+            const rowSty = rowStyle ? rowStyle(row, virtualRow.index) : void 0;
             return /* @__PURE__ */ jsx4(
               "div",
               {
@@ -1110,12 +1114,14 @@ var TableBody = ({
                 "data-column-key": col.key,
                 "data-bt-cell": "",
                 "data-selected": isSelected || void 0,
+                className: rowCls || void 0,
                 style: {
                   position: "absolute",
                   top: `${virtualRow.start}px`,
                   left: 0,
                   right: 0,
-                  height: `${virtualRow.size}px`
+                  height: `${virtualRow.size}px`,
+                  ...rowSty
                 },
                 children: /* @__PURE__ */ jsx4(
                   "div",
@@ -1237,15 +1243,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1342,15 +1351,18 @@ var TableBody = ({
               const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
               const isSelected = selectedKeySet.has(rk);
               const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              const rowCls = rowClassName ? rowClassName(row, rowIdx) : "";
+              const rowSty = rowStyle ? rowStyle(row, rowIdx) : void 0;
               return /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames?.pinnedRow ?? "",
+                  className: `${classNames?.pinnedRow ?? ""} ${rowCls}`.trim() || void 0,
                   style: {
                     display: "grid",
                     gridTemplateColumns: gridTemplateColumns ?? "",
                     minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
-                    ...styles?.pinnedRow
+                    ...styles?.pinnedRow,
+                    ...rowSty
                   },
                   children: orderedColumns.map((col) => {
                     const cellValue = row[col.dataIndex];
@@ -1468,7 +1480,9 @@ function BoltTable({
   columnContextMenuItems,
   autoHeight = true,
   layoutLoading,
-  emptyRenderer
+  emptyRenderer,
+  rowClassName,
+  rowStyle
 }) {
   const [columns, setColumns] = useState2(initialColumns);
   const [columnOrder, setColumnOrder] = useState2(
@@ -2685,7 +2699,9 @@ function BoltTable({
                               pinnedTopData: pinnedTopRows,
                               pinnedBottomData: pinnedBottomRows,
                               gridTemplateColumns,
-                              headerHeight: HEADER_HEIGHT
+                              headerHeight: HEADER_HEIGHT,
+                              rowClassName,
+                              rowStyle
                             }
                           )
                         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolt-table",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Virtualized React table with column drag & drop, pinning, resizing, sorting, filtering, and pagination.",
   "license": "MIT",
   "main": "./dist/index.js",