@syook/react-tabulous 4.5.0 → 4.6.0-beta.1

package/lib/types/reactTabulous/components/cell/columnCell.d.ts

@@ -7,8 +7,8 @@ type ColumnCellProps = React.HTMLAttributes<HTMLDivElement> & {
     row?: any;
     column?: any;
     emptyPlaceholder: string;
-    rowIndex: number;
-    align: ColumnAlignment;
+    rowIndex?: number;
+    align?: ColumnAlignment;
 };
 declare const ColumnCell: React.FC<ColumnCellProps>;
 export default ColumnCell;

package/lib/types/reactTabulous/components/filter/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const filterPredicates: string[];
-interface FilterOperators {
+export interface FilterOperators {
     string: string[];
     number: string[];
     date: string[];
@@ -10,4 +10,3 @@ interface FilterOperators {
 }
 export declare const filterOperators: FilterOperators;
 export declare const FilterForm: React.FC;
-export {};

package/lib/types/reactTabulous/components/toolbar/gridToolbarConditionalFormatting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Toolbar section for Conditional Formatting.
+ * Full UI for custom rules (apply to, condition, style); priority by add order.
+ * Rules evaluated/applied independently to cells.
+ */
+export declare const GridToolbarConditionalFormatting: React.FC;

package/lib/types/reactTabulous/components/toolbar/index.d.ts

@@ -4,3 +4,4 @@ export * from './gridToolbarDensity';
 export * from './gridToolbarExport';
 export * from './gridToolbarFilter';
 export * from './gridToolbarQuickFilter';
+export * from './gridToolbarConditionalFormatting';

package/lib/types/reactTabulous/components/widgets/dotIndicator.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DotIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/types/reactTabulous/components/widgets/icon.d.ts

@@ -10,6 +10,7 @@ declare const icons: {
     density: import("react/jsx-runtime").JSX.Element;
     download: import("react/jsx-runtime").JSX.Element;
     filter: import("react/jsx-runtime").JSX.Element;
+    'conditional-format': import("react/jsx-runtime").JSX.Element;
     'filter-list': import("react/jsx-runtime").JSX.Element;
     sort: import("react/jsx-runtime").JSX.Element;
     'sort-up-fill': import("react/jsx-runtime").JSX.Element;

package/lib/types/reactTabulous/components/widgets/index.d.ts

@@ -1,6 +1,7 @@
 export * from './button';
 export * from './checkbox';
 export * from './divider';
+export * from './dotIndicator';
 export * from './icon';
 export * from './iconButton';
 export * from './loader';

package/lib/types/reactTabulous/helpers/getConditionalCellStyle.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+import { type GridConditionalFormattingRule } from '../models';
+import { type GridColDef } from '../models';
+/**
+ * Computes the style for a cell based on matching conditional formatting rules.
+ * Rules are checked in order (priority by array position); last match wins for overlapping styles.
+ * Independent of filters/sorts.
+ * Applies to the rule's field (column).
+ */
+export declare const getConditionalCellStyle: (row: any, column: GridColDef, rowIndex: number, rules?: GridConditionalFormattingRule[]) => CSSProperties;

package/lib/types/reactTabulous/helpers/getFormattedFilters.d.ts

@@ -7,4 +7,5 @@ export declare const getFormattedFilters: (filters: FilterFieldProps[], columns:
     column: string;
     operator: string;
     value: any;
+    value2?: any;
 }[];

package/lib/types/reactTabulous/hooks/useGridConditionalFormatting.d.ts

@@ -0,0 +1,15 @@
+import { type GridConditionalFormattingRule } from '../models';
+/**
+ * Hook to manage conditional formatting rules.
+ * Similar to useGridFilter.
+ * Rules stored in root state.
+ */
+export declare const useGridConditionalFormatting: () => {
+    conditionalFormatting: GridConditionalFormattingRule[];
+    handleAddRule: (newRule: Omit<GridConditionalFormattingRule, 'id' | 'priority'>) => void;
+    handleRemoveRule: (ruleId: string) => void;
+    handleUpdateRule: (updatedRule: GridConditionalFormattingRule) => void;
+    handleClearRules: () => void;
+    handleSetRules: (rules: GridConditionalFormattingRule[]) => void;
+    columns: import("../models").GridColDef<any, any, any>[];
+};

package/lib/types/reactTabulous/hooks/useGridFilter.d.ts

@@ -1,6 +1,6 @@
 import { type GridColDef } from '../models';
-export declare const queryCondition: (columnValue: string, operator: string, value: string, type: string) => boolean;
+export declare const queryCondition: (columnValue: string, operator: string, value: string, type: string, value2?: string) => boolean;
 export declare const getQueryValue: (rowObject: any, column: string, columnDef: GridColDef) => any;
-export declare const filterData: (data: any, column: string, operator: string, value: string, type: string, columnDef: GridColDef) => any;
+export declare const filterData: (data: any, column: string, operator: string, value: string, type: string, columnDef: GridColDef, value2?: string) => any;
 export declare const filterAllData: (filters: any, data: any, columns: GridColDef[]) => any;
 export declare const useGridFilter: () => any;

package/lib/types/reactTabulous/hooks/useGridRootProps.d.ts

@@ -45,6 +45,8 @@ export declare const DATA_GRID_PROPS_DEFAULT_VALUES: {
     rowsCount: null;
     customExport: null;
     onFilterChange: null;
+    conditionalFormatting: never[];
+    onConditionalFormattingChange: null;
 };
 export declare const useGridRootProps: () => {
     rootState: DataGridPropsWithDefaultValues;

package/lib/types/reactTabulous/models/gridConditionalFormatting.d.ts

@@ -0,0 +1,47 @@
+export type ConditionalFormattingOperator = string;
+export interface GridConditionalFormattingRule {
+    /**
+     * Unique ID for the rule.
+     */
+    id: string;
+    /**
+     * The field (column) to evaluate condition and apply style to.
+     * (Relies on this key/value; no separate columns array needed.)
+     */
+    field: string;
+    /**
+     * Operator for the condition (reuses filter operators).
+     */
+    operator: ConditionalFormattingOperator;
+    /**
+     * Value for condition (e.g. threshold, text).
+     */
+    value?: any;
+    /**
+     * Second value for operators like 'between'.
+     */
+    value2?: any;
+    /**
+     * Styles to apply if condition matches.
+     */
+    style: {
+        textColor?: string;
+        backgroundColor?: string;
+    };
+    /**
+     * Higher number = higher priority (last in array wins on ties).
+     * Managed by rule order in UI.
+     */
+    priority: number;
+}
+export interface GridConditionalFormattingProps {
+    /**
+     * Array of conditional formatting rules.
+     * Rules are evaluated in order for each cell/row.
+     */
+    conditionalFormatting?: GridConditionalFormattingRule[];
+    /**
+     * Callback when rules change (e.g. add/edit/delete).
+     */
+    onConditionalFormattingChange?: (rules: GridConditionalFormattingRule[]) => void;
+}

package/lib/types/reactTabulous/models/gridFiltersModel.d.ts

@@ -5,6 +5,7 @@ export interface FilterFieldProps {
     type: 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect';
     operator: string;
     value: any;
+    value2?: any;
     field?: string;
     options?: string[] | OptionInterface[];
 }

package/lib/types/reactTabulous/models/index.d.ts

@@ -5,3 +5,4 @@ export * from './gridFiltersModel';
 export * from './gridRows';
 export * from './gridSortModel';
 export * from './logger';
+export * from './gridConditionalFormatting';

package/lib/types/reactTabulous/models/props/dataGridProps.d.ts

@@ -5,6 +5,7 @@ import { type GridSortDirection } from '../gridSortModel';
 import { type Logger } from '../logger';
 import { type GridRowId, type GridValidRowModel } from '../gridRows';
 import { type FilterFieldProps } from '../gridFiltersModel';
+import { type GridConditionalFormattingRule } from '../gridConditionalFormatting';
 export interface DataGridPropsWithDefaultValues {
     data: any;
     rootData: [];
@@ -158,12 +159,23 @@ export interface DataGridPropsWithDefaultValues {
      * if the export is custom.
      *
      */
-    customExport: null | ((filteredAndSortedData: any, searchText: string, columns: any) => void);
+    customExport: null | ((filteredAndSortedData: any, searchText: string, columns: any, conditionalFormatting?: any) => void);
     /**
      * Callback fired when filter is changed with filters as arguments.
      *
      */
     onFilterChange: null | ((filters: FilterFieldProps[]) => void);
+    /**
+     * Conditional formatting rules to apply to cells/rows.
+     * Rules evaluated independently (after filters/sorts).
+     * Multiple rules; later rules override on conflicts based on order/priority.
+     * @default []
+     */
+    conditionalFormatting: GridConditionalFormattingRule[];
+    /**
+     * Callback fired when conditional formatting rules change.
+     */
+    onConditionalFormattingChange: null | ((rules: GridConditionalFormattingRule[]) => void);
     /**
      * custom placeholder for the search field.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syook/react-tabulous",
-  "version": "4.5.0",
+  "version": "4.6.0-beta.1",
   "description": "Terrifically fabulous React Table",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",