# Data Connections block

> Dev Ops Data Connections Settings with Linked Datasets, Masked Data Preview and Sync Activity

Settings for database, warehouse, app and file connections: stat cards, a needs attention list, 3 step setup with a test and credential rotation. ReUI Data Grid, Stepper, Filters. For integrations, data sources, ETL connectors.

- Type: Pro block
- Category: [Dev Ops](https://web.dev.reui.io/blocks/solutions/dev-ops.md)
- Page: https://web.dev.reui.io/blocks/solutions/dev-ops/solution-dev-ops-6
- MCP: `get_block("solution-dev-ops-6")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Button Group, Chart, Checkbox, Data Grid, Dialog, Dropdown Menu, Empty, Field, Filters, Frame, Hover Card, Icon Tile, Input, Input Group, Item, Label, Popover, Select, Separator, Sheet, Skeleton, Spinner, Stepper, Switch, Table, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Data sources checked by reach, authenticate and read tests, with PII masked sample rows and an hourly runs or rows sync chart

## Agent notes

- Preview rows come from the seeded `sampleRows` generator and `maskSample` masks PII in the browser; serve real rows from your API, masked on the server
- `ConnectionTest` steps through `checksFor` on a `STEP_MS` timer with no network call; only a failing connection's `issue` fails the Authenticate check
- `rotateCredential` keeps only the last 4 characters of the secret through `hintOf`, and `syncNow` fakes a run on a `SYNC_MS` timer; wire your API in both

## When not to use

- A masked payments ledger with risk scores and bulk refunds, without connection setup: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-1")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-dev-ops-6
```

## About Dev Ops blocks

### When to use

- Platform and SRE consoles for cron jobs, releases, audit trails, SLOs, edge firewalls and data sources
- On call triage of failing jobs, failed deploys, denied access, blocked requests and burning error budgets
- Operator changes made in place: pausing a job, promoting or rolling back, editing rules, rotating credentials

### When not to use

- A single table on your own columns, with no charts, lanes or ops panels around it: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A table section for business records such as tickets, contacts, deals or timesheets: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Only the record detail panel that slides over a list, without the console page: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)

### Agent notes

- Every block pins now to Sep 29, 2026 14:20 UTC in `REFERENCE_MS`, set from `REFERENCE_DATE` in the audit log, and never reads the wall clock; pass your own now
- Writes only update client state and answer with a sonner `toast`; no block calls a server, so add your API at each write point
- Both page.tsx and each root set `min-h-svh`, and the root caps width at 1320px with its own padding; drop both inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.