# Data Validation Editor

<figure><img src="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-ed787432f06d0da427084229078bcb6b9ed2c739%2Fimage.png?alt=media" alt=""><figcaption><p>Data validations editor screenshot</p></figcaption></figure>

{% code overflow="wrap" %}

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

{% endcode %}