# Example: Deep CSS override

Plain selectors recolor the selected cell and the header and the resize handle with no !important, and a computed-style readout proves an attempted resize-handle width override does nothing because the surface writes width inline.

Source: https://pretable.ai/examples/deep-css-override.md

```tsx DeepCssOverrideGrid.tsx
"use client";

import { useLayoutEffect, useRef, useState } from "react";

import { PretableSurface } from "@pretable/react";

import "./deep-override.css";

import { columns } from "./columns";
import { tickets, type Ticket } from "./data";

const VIEWPORT_HEIGHT = 220;

export function DeepCssOverrideGrid() {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const [handleWidth, setHandleWidth] = useState<string | null>(null);

  useLayoutEffect(() => {
    const handle = wrapperRef.current?.querySelector<HTMLElement>(
      "[data-pretable-resize-handle]",
    );
    if (handle) {
      setHandleWidth(getComputedStyle(handle).width);
    }
  }, []);

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        Click a cell to select it. The header is uppercased and the resize
        handle (hover a column edge) is purple — both plain selectors, no{" "}
        <code>!important</code>.
      </p>
      <div className="cascade-demo" ref={wrapperRef}>
        <PretableSurface<Ticket>
          ariaLabel="Support tickets"
          columns={columns}
          getRowId={(row) => row.id}
          rows={tickets}
          viewportHeight={VIEWPORT_HEIGHT}
        />
      </div>
      <p style={{ margin: "8px 0 0", fontSize: 13 }}>
        The stylesheet above also asks the resize handle for{" "}
        <code>width: 8px</code>. Its computed width is{" "}
        <code>{handleWidth ?? "…"}</code> — the surface writes{" "}
        <code>width: 4px</code> inline, and inline styles beat every stylesheet
        rule.
      </p>
    </div>
  );
}
```

```css deep-override.css
/* Scoped to .cascade-demo instead of written as bare global selectors —
   purely a docs-site adaptation so this one grid's overrides don't also hit
   every other grid on this page. A real app can write these unscoped; they
   win on layer order and zero specificity regardless. */

.cascade-demo [data-pretable-cell][data-pretable-selected="true"] {
  background: #1d4ed8;
  color: white;
}

.cascade-demo [data-pretable-header-cell] {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.cascade-demo [data-pretable-resize-handle] {
  background: rebeccapurple;
}

/* Does nothing: the surface writes `width: 4px` inline on this element, and
   inline styles beat every stylesheet rule regardless of layer or
   specificity. Kept here, unremoved, so the caption below can read the
   computed value and prove the claim rather than just asserting it. */
.cascade-demo [data-pretable-resize-handle] {
  width: 8px;
}
```

```ts columns.ts
import type { PretableColumn } from "@pretable/react";

import type { Ticket } from "./data";

export const columns: PretableColumn<Ticket>[] = [
  { id: "subject", header: "Subject", widthPx: 220 },
  { id: "assignee", header: "Assignee", widthPx: 110 },
  { id: "priority", header: "Priority", widthPx: 100 },
];
```

```ts data.ts
export interface Ticket {
  id: string;
  subject: string;
  assignee: string;
  priority: "Low" | "Medium" | "High";
}

export const tickets: Ticket[] = [
  {
    id: "t1",
    subject: "Login redirect loop",
    assignee: "Mara",
    priority: "High",
  },
  {
    id: "t2",
    subject: "Export button greyed out",
    assignee: "Devon",
    priority: "Medium",
  },
  {
    id: "t3",
    subject: "Typo on invoice PDF",
    assignee: "Mara",
    priority: "Low",
  },
  {
    id: "t4",
    subject: "Slow report generation",
    assignee: "Kai",
    priority: "Medium",
  },
];
```