Comment on page
Conditional formatting
Change text or background colour of cells based on the value
CanvasGrid accepts array of
conditionalFormats prop which can be used to inject formatting rules based on the value of a cell. Formula values are supported.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>
);
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
},
},
},
],
// 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;
Last modified 28d ago