Copy import { SpreadsheetProvider , CanvasGrid } from "@rowsncolumns/spreadsheet" ;
const MySpreadsheet = () => {
return (
< CanvasGrid
conditionalFormats = {[
{
ranges : [
{
startRowIndex : 1 ,
endRowIndex : 1000 ,
startColumnIndex : 2 ,
endColumnIndex : 2 ,
} ,
] ,
booleanRule : {
condition : {
type : "NUMBER_LESS" ,
values : [
{
userEnteredValue : "0" ,
} ,
] ,
} ,
format : {
backgroundColor : "red" ,
} ,
} ,
} ,
]}
/>
);
};
const App = () => (
< SpreadsheetProvider >
< MySpreadsheet />
</ SpreadsheetProvider >
);
Gradient scale or heatmaps
Copy conditionalFormats : [
{
ranges : [
{
startRowIndex : 11 ,
endRowIndex : 26 ,
startColumnIndex : 7 ,
endColumnIndex : 8 ,
} ,
] ,
gradientRule : {
minpoint : {
color : "#FFCF54" ,
type : "MIN" ,
// value: 10 Automatically calculated from range
} ,
midpoint : {
color : "#FFE8A3" ,
type : "MIN" ,
// value: 12, Automatically calculated from range
} ,
maxpoint : {
color : "#FFFFFF" ,
type : "MAX" ,
// value: 21, Automatically calculated from range
} ,
} ,
} ,
] ,
Copy // Supported condition types
export const CONDITION_TYPES = [
"NUMBER_GREATER" ,
"NUMBER_GREATER_THAN_EQ" ,
"NUMBER_LESS" ,
"NUMBER_LESS_THAN_EQ" ,
"NUMBER_EQ" ,
"NUMBER_NOT_EQ" ,
"NUMBER_BETWEEN" ,
"NUMBER_NOT_BETWEEN" ,
"TEXT_CONTAINS" ,
"TEXT_NOT_CONTAINS" ,
"TEXT_STARTS_WITH" ,
"TEXT_ENDS_WITH" ,
"TEXT_EQ" ,
"TEXT_IS_EMAIL" ,
"TEXT_IS_URL" ,
"DATE_EQ" ,
"DATE_BEFORE" ,
"DATE_AFTER" ,
"DATE_ON_OR_BEFORE" ,
"DATE_ON_OR_AFTER" ,
"DATE_BETWEEN" ,
"DATE_NOT_BETWEEN" ,
"DATE_IS_VALID" ,
"ONE_OF_RANGE" ,
"ONE_OF_LIST" ,
"BLANK" ,
"NOT_BLANK" ,
"CUSTOM_FORMULA" ,
"BOOLEAN" ,
"TEXT_NOT_EQ" ,
"DATE_NOT_EQ" ,
] as const ;
Spreadsheet comes with a default conditional format editor.
Copy import { SpreadsheetProvider , CanvasGrid , defaultSpreadsheetTheme } from "@rowsncolumns/spreadsheet" ;
import { ConditionalFormatDialog , ConditionalFormatEditor } from "@rowsncolumns/spreadsheet-state"
const MySpreadsheet = () => {
const [ conditionalFormats , onChangeConditionalFormats ] = useState <
ConditionalFormatRule[]
> ([]);
const [ theme , onChangeTheme ] = useState < SpreadsheetTheme >(
defaultSpreadsheetTheme
);
const {
onRequestConditionalFormat ,
createHistory ,
getSheetId ,
getSheetName ,
rowCount ,
columnCount ,
activeSheetId
} = useSpreadsheetState ()
return (
<>
< CanvasGrid
conditionalFormats = {conditionalFormats}
onRequestConditionalFormat = {onRequestConditionalFormat}
/>
< ConditionalFormatDialog >
< ConditionalFormatEditor
sheetId = {activeSheetId}
rowCount = {rowCount}
columnCount = {columnCount}
getSheetName = {getSheetName}
getSheetId = {getSheetId}
theme = {theme}
conditionalFormats = {conditionalFormats}
onChangeConditionalFormats = {onChangeConditionalFormats}
createHistory = {createHistory}
/>
</ ConditionalFormatDialog >
</>
);
};
const App = () => (
< SpreadsheetProvider >
< MySpreadsheet />
</ SpreadsheetProvider >
);