> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Column Editor

> Reference implementations for editing table columns.

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

The Column editor lets a user reorder, show, hide, pin, and unpin the columns of a table. Present it in a `Drawer`. Each example below is a starting point: copy it, then wire the columns and actions to your table's state.

## Resources

<Card title="Drawer" icon="layer-group" href="/docs/web/components/drawer/design">
  Drawer component anatomy and usage guidance.
</Card>

<Card title="Column editor" icon="figma" href="https://www.figma.com/design/9OB8FwOZZc079PBR6XY8vP/Anvil-Blocks?node-id=547-5429">
  Figma reference implementations for the column editor.
</Card>

## In a Drawer

The full column editor inside a `Drawer` — header with close, a search field, Pinned / Visible / Hidden sections, and Reset / Cancel / Apply actions in the footer.

The drag handles are decorative in these examples: they are marked `aria-hidden` and no drag-and-drop is wired up. Reordering needs a drag-and-drop library, and the handles must be made focusable and operable by keyboard before the affordance is shown to users. The `SearchField` is equally inert — it has no value and filters nothing — so wire it up before shipping; it's the first interactive thing in every example.

<LiveCode example="block-column-editor-in-a-drawer-full-page" screenshot fullWidth>
  ```tsx lines theme={null}
  import {
    Drawer,
    SearchField,
    Checkbox,
    Divider,
    Text,
    Icon,
    Button,
    Flex,
  } from "@servicetitan/anvil2";
  import DragIndicator from "@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg";
  import PushPin from "@servicetitan/anvil2/assets/icons/material/round/push_pin.svg";

  function App() {
    return (
      <Drawer open onClose={() => console.log("close")}>
        <Drawer.Header>Edit columns</Drawer.Header>
        <Drawer.Content>
          <Flex direction="column" gap={8} style={{ width: "100%" }}>
            <Flex direction="column" gap={4} style={{ width: "100%" }}>
              <Text>
                Your edits only apply to you and won’t affect teammates. You can
                reorder, hide, show, pin, or unpin columns below.
              </Text>
              <SearchField placeholder="Search..." aria-label="Search columns" />
            </Flex>

            <Flex direction="column" gap={6} style={{ width: "100%" }}>
              {/* Pinned */}
              <Flex direction="column" gap={2} style={{ width: "100%" }}>
                <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
                  <Text
                    variant="eyebrow"
                    size="small"
                    style={{ whiteSpace: "nowrap" }}
                  >
                    Pinned Columns
                  </Text>
                  <div style={{ flex: 1 }}>
                    <Divider spacing="0" />
                  </div>
                </Flex>
                <Flex
                  alignItems="center"
                  gap={2}
                  style={{ padding: 4, width: "100%" }}
                >
                  <Icon
                    svg={DragIndicator}
                    color="var(--a2-foreground-color-subdued)"
                    aria-hidden
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <Checkbox label="Location Name" defaultChecked />
                  </div>
                  <Button
                    appearance="ghost"
                    size="small"
                    icon={PushPin}
                    aria-label="Unpin Location Name"
                    onClick={() => console.log("Unpin Location Name")}
                  />
                </Flex>
              </Flex>

              {/* Visible */}
              <Flex direction="column" gap={2} style={{ width: "100%" }}>
                <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
                  <Text
                    variant="eyebrow"
                    size="small"
                    style={{ whiteSpace: "nowrap" }}
                  >
                    Visible Columns
                  </Text>
                  <div style={{ flex: 1 }}>
                    <Divider spacing="0" />
                  </div>
                </Flex>
                <Flex
                  alignItems="center"
                  gap={2}
                  style={{ padding: 4, width: "100%" }}
                >
                  <Icon
                    svg={DragIndicator}
                    color="var(--a2-foreground-color-subdued)"
                    aria-hidden
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <Checkbox label="Address" defaultChecked />
                  </div>
                  <Button
                    appearance="ghost"
                    size="small"
                    icon={PushPin}
                    aria-label="Pin Address"
                    onClick={() => console.log("Pin Address")}
                  />
                </Flex>
                <Flex
                  alignItems="center"
                  gap={2}
                  style={{ padding: 4, width: "100%" }}
                >
                  <Icon
                    svg={DragIndicator}
                    color="var(--a2-foreground-color-subdued)"
                    aria-hidden
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <Checkbox label="Invoice Signature" defaultChecked />
                  </div>
                  <Button
                    appearance="ghost"
                    size="small"
                    icon={PushPin}
                    aria-label="Pin Invoice Signature"
                    onClick={() => console.log("Pin Invoice Signature")}
                  />
                </Flex>
                <Flex
                  alignItems="center"
                  gap={2}
                  style={{ padding: 4, width: "100%" }}
                >
                  <Icon
                    svg={DragIndicator}
                    color="var(--a2-foreground-color-subdued)"
                    aria-hidden
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <Checkbox label="Tags" defaultChecked />
                  </div>
                  <Button
                    appearance="ghost"
                    size="small"
                    icon={PushPin}
                    aria-label="Pin Tags"
                    onClick={() => console.log("Pin Tags")}
                  />
                </Flex>
              </Flex>

              {/* Hidden */}
              <Flex direction="column" gap={2} style={{ width: "100%" }}>
                <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
                  <Text
                    variant="eyebrow"
                    size="small"
                    style={{ whiteSpace: "nowrap" }}
                  >
                    Hidden Columns
                  </Text>
                  <div style={{ flex: 1 }}>
                    <Divider spacing="0" />
                  </div>
                </Flex>
                <Text subdued size="small">
                  Hidden columns can’t be reordered or pinned.
                </Text>
                <Flex
                  alignItems="center"
                  gap={2}
                  style={{ padding: 4, width: "100%" }}
                >
                  <Checkbox label="Last Appointment" />
                </Flex>
              </Flex>
            </Flex>
          </Flex>
        </Drawer.Content>
        <Drawer.Footer>
          <Flex gap={2} style={{ width: "100%" }}>
            <Button
              appearance="secondary"
              onClick={() => console.log("Reset Defaults")}
            >
              Reset Defaults
            </Button>
            <Flex gap={3} justifyContent="end" style={{ flex: 1 }}>
              <Button
                appearance="secondary"
                onClick={() => console.log("Cancel")}
              >
                Cancel
              </Button>
              <Button appearance="primary" onClick={() => console.log("Apply")}>
                Apply
              </Button>
            </Flex>
          </Flex>
        </Drawer.Footer>
      </Drawer>
    );
  }

  export default App;
  ```
</LiveCode>

## System Pinned Options

A system-pinned column stays pinned: its checkbox is disabled so it can't be hidden, and its unpin action is disabled so it can't be moved out of the pinned section.

<LiveCode example="block-column-editor-system-pinned-options" screenshot fullWidth>
  ```tsx lines theme={null}
  import {
    SearchField,
    Checkbox,
    Divider,
    Text,
    Icon,
    Button,
    Flex,
  } from "@servicetitan/anvil2";
  import DragIndicator from "@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg";
  import PushPin from "@servicetitan/anvil2/assets/icons/material/round/push_pin.svg";

  function App() {
    return (
      <Flex direction="column" gap={8} style={{ maxWidth: 560, width: "100%" }}>
        <Flex direction="column" gap={4} style={{ width: "100%" }}>
          <Text>
            Your edits only apply to you and won’t affect teammates. You can
            reorder, hide, show, pin, or unpin columns below.
          </Text>
          <SearchField placeholder="Search..." aria-label="Search columns" />
        </Flex>

        <Flex direction="column" gap={6} style={{ width: "100%" }}>
          {/* Pinned — Location Name is system-pinned: it cannot be hidden or unpinned */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Pinned Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Location Name" defaultChecked disabled />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Unpin Location Name"
                disabled
              />
            </Flex>
          </Flex>

          {/* Visible */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Visible Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Address" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Address"
                onClick={() => console.log("Pin Address")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Invoice Signature" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Invoice Signature"
                onClick={() => console.log("Pin Invoice Signature")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Tags" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Tags"
                onClick={() => console.log("Pin Tags")}
              />
            </Flex>
          </Flex>

          {/* Hidden */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Hidden Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Text subdued size="small">
              Hidden columns can’t be reordered or pinned.
            </Text>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Checkbox label="Last Appointment" />
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

## Grouped Options

Grouped columns, where a parent column nests child columns that indent beneath it.

<LiveCode example="block-column-editor-grouped-options" screenshot fullWidth>
  ```tsx lines theme={null}
  import {
    SearchField,
    Checkbox,
    Divider,
    Text,
    Icon,
    Button,
    Flex,
  } from "@servicetitan/anvil2";
  import DragIndicator from "@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg";
  import PushPin from "@servicetitan/anvil2/assets/icons/material/round/push_pin.svg";

  function App() {
    return (
      <Flex direction="column" gap={8} style={{ maxWidth: 560, width: "100%" }}>
        <Flex direction="column" gap={4} style={{ width: "100%" }}>
          <Text>
            Your edits only apply to you and won’t affect teammates. You can
            reorder, hide, show, pin, or unpin columns below.
          </Text>
          <SearchField placeholder="Search..." aria-label="Search columns" />
        </Flex>

        <Flex direction="column" gap={6} style={{ width: "100%" }}>
          {/* Pinned */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Pinned Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Location Name" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Unpin Location Name"
                onClick={() => console.log("Unpin Location Name")}
              />
            </Flex>
          </Flex>

          {/* Visible — includes a grouped parent column with nested children */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Visible Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Address" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Address"
                onClick={() => console.log("Pin Address")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Invoice Signature" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Invoice Signature"
                onClick={() => console.log("Pin Invoice Signature")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Tags" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Tags"
                onClick={() => console.log("Pin Tags")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Parent Column Name" defaultChecked />
              </div>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Parent Column Name"
                onClick={() => console.log("Pin Parent Column Name")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, paddingLeft: 32, width: "100%" }}
            >
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Child Column 1" defaultChecked />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, paddingLeft: 32, width: "100%" }}
            >
              <div style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Child Column 2" defaultChecked />
              </div>
            </Flex>
          </Flex>

          {/* Hidden */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Hidden Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Text subdued size="small">
              Hidden columns can’t be reordered or pinned.
            </Text>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Checkbox label="Last Appointment" />
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

## Column Types Tag

Each column is tagged with its column type using a `Chip` beside the column name.

<LiveCode example="block-column-editor-column-types-tag" screenshot fullWidth>
  ```tsx lines theme={null}
  import {
    SearchField,
    Checkbox,
    Chip,
    Divider,
    Text,
    Icon,
    Button,
    Flex,
  } from "@servicetitan/anvil2";
  import DragIndicator from "@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg";
  import PushPin from "@servicetitan/anvil2/assets/icons/material/round/push_pin.svg";

  function App() {
    return (
      <Flex direction="column" gap={8} style={{ maxWidth: 560, width: "100%" }}>
        <Flex direction="column" gap={4} style={{ width: "100%" }}>
          <Text>
            Your edits only apply to you and won’t affect teammates. You can
            reorder, hide, show, pin, or unpin columns below.
          </Text>
          <SearchField placeholder="Search..." aria-label="Search columns" />
        </Flex>

        <Flex direction="column" gap={6} style={{ width: "100%" }}>
          {/* Pinned */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Pinned Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Location Name" defaultChecked />
                <Chip label="Text" size="small" />
              </Flex>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Unpin Location Name"
                onClick={() => console.log("Unpin Location Name")}
              />
            </Flex>
          </Flex>

          {/* Visible — each column shows its column-type tag */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Visible Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Address" defaultChecked />
                <Chip label="Text" size="small" />
              </Flex>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Address"
                onClick={() => console.log("Pin Address")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Invoice Signature" defaultChecked />
                <Chip label="Image" size="small" />
              </Flex>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Invoice Signature"
                onClick={() => console.log("Pin Invoice Signature")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Tags" defaultChecked />
                <Chip label="Multi-select" size="small" />
              </Flex>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Tags"
                onClick={() => console.log("Pin Tags")}
              />
            </Flex>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Icon
                svg={DragIndicator}
                color="var(--a2-foreground-color-subdued)"
                aria-hidden
              />
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Parent Column Name" defaultChecked />
                <Chip label="Group" size="small" />
              </Flex>
              <Button
                appearance="ghost"
                size="small"
                icon={PushPin}
                aria-label="Pin Parent Column Name"
                onClick={() => console.log("Pin Parent Column Name")}
              />
            </Flex>
          </Flex>

          {/* Hidden */}
          <Flex direction="column" gap={2} style={{ width: "100%" }}>
            <Flex alignItems="center" gap={6} style={{ width: "100%" }}>
              <Text
                variant="eyebrow"
                size="small"
                style={{ whiteSpace: "nowrap" }}
              >
                Hidden Columns
              </Text>
              <div style={{ flex: 1 }}>
                <Divider spacing="0" />
              </div>
            </Flex>
            <Text subdued size="small">
              Hidden columns can’t be reordered or pinned.
            </Text>
            <Flex
              alignItems="center"
              gap={2}
              style={{ padding: 4, width: "100%" }}
            >
              <Flex alignItems="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
                <Checkbox label="Last Appointment" />
                <Chip label="Date" size="small" />
              </Flex>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>