> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/components/data-validation-editor.md).

# Data Validation Editor

<figure><img src="/files/LWMb0tFNfqIK5IvqP5GB" 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 %}