Data Validation Editor
Allow users to edit data validation rules
import { CanvasGrid, SpreadsheetProvider, defaultSpreadsheetTheme } from "@rowsncolumns/spreadsheet"
import { useSpreadsheet, ConditionalFormatDialog, ConditionalFormatEditor } from "@rowsncolumns/spreadsheet-state"
const Spreadsheet = () => {
const [ dataValidations, onChangeDataValidations] = useState<
DataValidationRuleRecord[]>([]);
const {
activeSheetId,
rowCount,
columnCount,
onRequestDataValidation,
onCreateDataValidationRule,
onUpdateDataValidationRule,
onDeleteDataValidationRule,
onDeleteDataValidationRules
} = useSpreadsheetState({
dataValidations,
onChangeDataValidations
})
return (
<>
<CanvasGrid
// User is requesting to open editor
onRequestDataValidation={onRequestDataValidation}
/>
<DataValidationEditorDialog>
<DataValidationEditor
dataValidations={dataValidations}
sheetId={activeSheetId}
rowCount={rowCount}
columnCount={columnCount}
onDeleteRules={onDeleteDataValidationRules}
onDeleteRule={onDeleteDataValidationRule}
onCreateRule={onCreateDataValidationRule}
onUpdateRule={onUpdateDataValidationRule}
/>
</DataValidationEditorDialog>
</>
)
}
const App = () => (
<SpreadsheetProvider>
<Spreadsheet />
</SpreadsheetProvider>
)
Last updated