Links
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>
);

Gradient scale or heatmaps

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 conditions

// 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;