# Table Advanced 4 - Compatibility

> Compatibility Table.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/table-table-advanced-4).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/table-table-advanced-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/table-table-advanced-4-light-d73f9ddaa63805e8.png
- Registry item: https://shadcnblocks.com/r/table-table-advanced-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/table-table-advanced-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `table`

## Files

### `example/table/table-advanced-4.tsx`

```tsx
import { CheckIcon, XIcon } from "lucide-react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export const title = "Compatibility Table";

const features = [
  {
    feature: "CSS Grid",
    chrome: true,
    firefox: true,
    safari: true,
    edge: true,
    chromeAndroid: true,
    safariIos: true,
  },
  {
    feature: "Flexbox",
    chrome: true,
    firefox: true,
    safari: true,
    edge: true,
    chromeAndroid: true,
    safariIos: true,
  },
  {
    feature: "Container Queries",
    chrome: true,
    firefox: true,
    safari: true,
    edge: true,
    chromeAndroid: true,
    safariIos: false,
  },
  {
    feature: "Subgrid",
    chrome: true,
    firefox: true,
    safari: true,
    edge: true,
    chromeAndroid: false,
    safariIos: true,
  },
  {
    feature: ":has() Selector",
    chrome: true,
    firefox: true,
    safari: true,
    edge: true,
    chromeAndroid: true,
    safariIos: true,
  },
];

const SupportIcon = ({ supported }: { supported: boolean }) => (
  <div className="flex justify-center">
    {supported ? (
      <CheckIcon className="size-4 text-green-600" />
    ) : (
      <XIcon className="size-4 text-red-600" />
    )}
  </div>
);

const Example = () => (
  <div className="w-full max-w-4xl rounded-md border bg-background">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[180px]">CSS Feature</TableHead>
          <TableHead className="text-center">Chrome</TableHead>
          <TableHead className="text-center">Firefox</TableHead>
          <TableHead className="text-center">Safari</TableHead>
          <TableHead className="text-center">Edge</TableHead>
          <TableHead className="text-center">Chrome Android</TableHead>
          <TableHead className="text-center">Safari iOS</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {features.map((feature) => (
          <TableRow key={feature.feature}>
            <TableCell className="font-medium">{feature.feature}</TableCell>
            <TableCell>
              <SupportIcon supported={feature.chrome} />
            </TableCell>
            <TableCell>
              <SupportIcon supported={feature.firefox} />
            </TableCell>
            <TableCell>
              <SupportIcon supported={feature.safari} />
            </TableCell>
            <TableCell>
              <SupportIcon supported={feature.edge} />
            </TableCell>
            <TableCell>
              <SupportIcon supported={feature.chromeAndroid} />
            </TableCell>
            <TableCell>
              <SupportIcon supported={feature.safariIos} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </div>
);

export default Example;
```