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

package/README.md

@@ -2,7 +2,7 @@
 
 ## Installation
 
-To use in your own project, install it via [npm package](https://www.npmjs.com/package/@syook/react-tabulous).
+To use in your own project, install it via [npm package](https://www.npmjs.com/package/react-tabulous).
 
 `npm i @syook/react-tabulous`
 

package/lib/index.d.ts

@@ -172,10 +172,59 @@ interface FilterFieldProps {
     type: 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect';
     operator: string;
     value: any;
+    value2?: any;
     field?: string;
     options?: string[] | OptionInterface[];
 }
 
+type ConditionalFormattingOperator = string;
+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;
+}
+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;
+}
+
 interface DataGridPropsWithDefaultValues {
     data: any;
     rootData: [];
@@ -329,12 +378,23 @@ 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.
      */
@@ -347,4 +407,4 @@ type DataGridProps<R extends GridValidRowModel = any> = Partial<DataGridPropsWit
 type DataGridComponent = React$1.ForwardRefExoticComponent<DataGridProps<GridValidRowModel> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ReactTabulous: DataGridComponent;
 
-export { ColumnType, DataGridProps, DataGridPropsWithDefaultValues, FilterFieldProps, GridActionsColDef, GridBaseColDef, GridColDef, GridColumnPinningApi, GridColumnPinningInternalCache, GridColumnPinningState, GridDensity, GridPinnedColumns, GridPinnedPosition, GridRowId, GridSortDirection, GridValidRowModel, Logger, NativeColTypes, ReactTabulous };
+export { ColumnType, ConditionalFormattingOperator, DataGridProps, DataGridPropsWithDefaultValues, FilterFieldProps, GridActionsColDef, GridBaseColDef, GridColDef, GridColumnPinningApi, GridColumnPinningInternalCache, GridColumnPinningState, GridConditionalFormattingProps, GridConditionalFormattingRule, GridDensity, GridPinnedColumns, GridPinnedPosition, GridRowId, GridSortDirection, GridValidRowModel, Logger, NativeColTypes, ReactTabulous };