Data Validation Editor

Allow users to edit data validation rules

Data validations editor screenshot

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