# Dns Record Table

> Domains and DNS: DnsRecordTable, DomainList (sorted by what needs attention) and MailAuthStatus (MX, SPF, DKIM, DMARC lights).

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/DnsRecordTable/)

Domains and DNS: `DnsRecordTable`, `DomainList` (sorted by what needs attention) and `MailAuthStatus` (MX, SPF, DKIM, DMARC lights).

DnsRecordTable: `records` ({id, type, name, content, ttl, proxy: true | false | null}), `rowMenu(record)` (Menu items), `selectable`, `bulkActions`, `toolbar`. Built on DataTable.
DomainList: `items` ({name, registrar, dns, days, ssl, sslLabel}), `onOpen`. Under 30 days warns, under 7 days is danger.
MailAuthStatus: `rows` ({domain, mx, spf, dkim, dmarc: {status, label}}), `columns`, `onOpen(row, column)`.

## Example

```tsx
import * as React from "react";
import { DnsRecordTable, DomainList, MailAuthStatus } from "@twentyfirstmedia/pro";

const recs = [
  {
    id: 1,
    type: "A",
    name: "@",
    content: "95.217.14.80",
    ttl: "Auto",
    proxy: true,
  },
  {
    id: 2,
    type: "CNAME",
    name: "www",
    content: "northwind.de",
    ttl: "Auto",
    proxy: true,
  },
  {
    id: 3,
    type: "MX",
    name: "@",
    content: "10 mx.halo-mail.net",
    ttl: "3600",
    proxy: null,
  },
  {
    id: 4,
    type: "TXT",
    name: "@",
    content: "v=spf1 include:_spf.halo-mail.net ~all",
    ttl: "3600",
    proxy: null,
  },
];
export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
      }}
    >
      <div className="tf-panel tf-panel-flush">
        <DnsRecordTable
          records={recs}
          rowMenu={() => [
            {
              label: "Edit",
              icon: "edit",
            },
            "-",
            {
              label: "Delete",
              icon: "trash",
              danger: true,
            },
          ]}
        />
      </div>
      <div
        className="tf-grid"
        style={
          {
            "--cols": "1fr 1fr",
            gap: 16,
          } as React.CSSProperties
        }
      >
        <div className="tf-panel tf-panel-flush tf-panel-list">
          <DomainList
            items={[
              {
                name: "halo.dev",
                registrar: "Cloudflare",
                dns: "Cloudflare",
                days: 18,
                ssl: "ok",
                sslLabel: "Valid",
              },
              {
                name: "northwind.de",
                registrar: "one.com",
                dns: "Cloudflare",
                days: 210,
                ssl: "ok",
                sslLabel: "Valid",
              },
              {
                name: "chatteo.de",
                registrar: "one.com",
                dns: "one.com",
                days: 5,
                ssl: "warn",
                sslLabel: "Renewing",
              },
            ]}
          />
        </div>
        <div className="tf-panel">
          <MailAuthStatus
            rows={[
              {
                domain: "northwind.de",
                mx: {
                  status: "ok",
                  label: "ok",
                },
                spf: {
                  status: "ok",
                  label: "ok",
                },
                dkim: {
                  status: "ok",
                  label: "ok",
                },
                dmarc: {
                  status: "warn",
                  label: "soft",
                },
              },
              {
                domain: "chatteo.de",
                mx: {
                  status: "ok",
                  label: "ok",
                },
                spf: {
                  status: "danger",
                  label: "missing",
                },
                dkim: {
                  status: "idle",
                  label: "—",
                },
                dmarc: {
                  status: "danger",
                  label: "missing",
                },
              },
            ]}
          />
        </div>
      </div>
    </div>
  );
}
```

## Props

### DnsRecordTable

| Prop | Type | Notes |
| --- | --- | --- |
| `records` | `DnsRecord[]` | Required |
| `rowMenu?` | `(r: DnsRecord) => (MenuItem \| "-")[]` |  |
| `selectable?` | `boolean` |  |
| `bulkActions?` | `BulkAction<DnsRecord>[]` |  |
| `toolbar?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### DomainList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ name: string; registrar?: string; dns?: string; days?: number; ssl?: Status; sslLabel?: string; }[]` | Required |
| `onOpen?` | `(d: NonNullable<DomainListProps["items"]>[number]) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### MailAuthStatus

| Prop | Type | Notes |
| --- | --- | --- |
| `rows` | `{ domain: string; mx?: { status: Status; label?: string }; spf?: { status: Status; label?: string }; dkim?: { status: Status; label?: string }; dmarc?: { status: Status; label?: string }; }[]` | Required |
| `columns?` | `string[]` |  |
| `onOpen?` | `(row: NonNullable<MailAuthStatusProps["rows"]>[number], column: string) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |