coder · BrunoQuaresma · Oct 9, 2025 · Oct 7, 2025 · Oct 8, 2025 · Oct 8, 2025
diff --git a/biome.jsonc b/biome.jsonc
@@ -53,6 +53,7 @@
 							"@mui/material/Box": "Use a <div> instead.",
 							"@mui/material/Button": "Use a components/Button/Button instead.",
 							"@mui/material/styles": "Import from @emotion/react instead.",
+							"@mui/material/Table*": "Import from components/Table/Table instead.",
 							"lodash": "Use lodash/<name> instead."
 						}
 					}

diff --git a/site/e2e/api.ts b/site/e2e/api.ts
@@ -213,7 +213,7 @@ export async function verifyConfigFlagBoolean(
 	const value = opt.value ? "Enabled" : "Disabled";
 
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .${type}`,
+		`table.options-table .option-${flag} .${type}`,
 	);
 	await expect(configOption).toHaveText(value);
 }
@@ -225,7 +225,7 @@ export async function verifyConfigFlagNumber(
 ) {
 	const opt = findConfigOption(config, flag);
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-value-number`,
+		`table.options-table .option-${flag} .option-value-number`,
 	);
 	await expect(configOption).toHaveText(String(opt.value));
 }
@@ -238,7 +238,7 @@ export async function verifyConfigFlagString(
 	const opt = findConfigOption(config, flag);
 
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-value-string`,
+		`table.options-table .option-${flag} .option-value-string`,
 	);
 	// biome-ignore lint/suspicious/noExplicitAny: opt.value is any
 	await expect(configOption).toHaveText(opt.value as any);
@@ -251,7 +251,7 @@ export async function verifyConfigFlagArray(
 ) {
 	const opt = findConfigOption(config, flag);
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-array`,
+		`table.options-table .option-${flag} .option-array`,
 	);
 
 	// Verify array of options with simple dots
@@ -268,7 +268,7 @@ export async function verifyConfigFlagEntries(
 ) {
 	const opt = findConfigOption(config, flag);
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-array`,
+		`table.options-table .option-${flag} .option-array`,
 	);
 
 	// Verify array of options with green marks.
@@ -296,7 +296,7 @@ export async function verifyConfigFlagDuration(
 		);
 	}
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-value-string`,
+		`table.options-table .option-${flag} .option-value-string`,
 	);
 	await expect(configOption).toHaveText(humanDuration(opt.value / 1e6));
 }

diff --git a/site/e2e/tests/deployment/general.spec.ts b/site/e2e/tests/deployment/general.spec.ts
@@ -19,7 +19,7 @@ test("experiments", async ({ page }) => {
 	await page.goto("/deployment/overview", { waitUntil: "domcontentloaded" });
 
 	const experimentsLocator = page.locator(
-		"div.options-table tr.option-experiments ul.option-array",
+		"table.options-table tr.option-experiments ul.option-array",
 	);
 	await expect(experimentsLocator).toBeVisible();
 

diff --git a/site/e2e/tests/deployment/security.spec.ts b/site/e2e/tests/deployment/security.spec.ts
@@ -47,7 +47,7 @@ async function verifyStrictTransportSecurity(
 	}
 
 	const configOption = page.locator(
-		`div.options-table .option-${flag} .option-value-string`,
+		`table.options-table .option-${flag} .option-value-string`,
 	);
 	await expect(configOption).toHaveText("Disabled");
 }
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
@@ -47,7 +47,7 @@ export const TableBody = React.forwardRef<
 	/>
 ));
 
-const _TableFooter = React.forwardRef<
+export const TableFooter = React.forwardRef<
 	HTMLTableSectionElement,
 	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
@@ -82,22 +82,23 @@ const tableRowVariants = cva(
 	},
 );
 
-export const TableRow = React.forwardRef<
-	HTMLTableRowElement,
-	React.HTMLAttributes<HTMLTableRowElement> &
-		VariantProps<typeof tableRowVariants>
->(({ className, hover, ...props }, ref) => (
-	<tr
-		ref={ref}
-		className={cn(
-			"border-0 border-b border-solid border-border transition-colors",
-			"data-[state=selected]:bg-muted",
-			tableRowVariants({ hover }),
-			className,
-		)}
-		{...props}
-	/>
-));
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> &
+	VariantProps<typeof tableRowVariants>;
+
+export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+	({ className, hover, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"border-0 border-b border-solid border-border transition-colors",
+				"data-[state=selected]:bg-muted",
+				tableRowVariants({ hover }),
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
 
 export const TableHead = React.forwardRef<
 	HTMLTableCellElement,

diff --git a/site/src/components/TableEmpty/TableEmpty.stories.tsx b/site/src/components/TableEmpty/TableEmpty.stories.tsx
@@ -1,8 +1,6 @@
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableContainer from "@mui/material/TableContainer";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CodeExample } from "components/CodeExample/CodeExample";
+import { Table, TableBody } from "components/Table/Table";
 import { TableEmpty } from "./TableEmpty";
 
 const meta: Meta<typeof TableEmpty> = {
@@ -13,13 +11,11 @@ const meta: Meta<typeof TableEmpty> = {
 	},
 	decorators: [
 		(Story) => (
-			<TableContainer>
-				<Table>
-					<TableBody>
-						<Story />
-					</TableBody>
-				</Table>
-			</TableContainer>
+			<Table>
+				<TableBody>
+					<Story />
+				</TableBody>
+			</Table>
 		),
 	],
 };

diff --git a/site/src/components/TableEmpty/TableEmpty.tsx b/site/src/components/TableEmpty/TableEmpty.tsx
@@ -1,9 +1,8 @@
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
 import {
 	EmptyState,
 	type EmptyStateProps,
 } from "components/EmptyState/EmptyState";
+import { TableCell, TableRow } from "components/Table/Table";
 import type { FC } from "react";
 
 type TableEmptyProps = EmptyStateProps;

diff --git a/site/src/components/TableLoader/TableLoader.stories.tsx b/site/src/components/TableLoader/TableLoader.stories.tsx
@@ -1,21 +1,17 @@
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableContainer from "@mui/material/TableContainer";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Table, TableBody } from "components/Table/Table";
 import { TableLoader } from "./TableLoader";
 
 const meta: Meta<typeof TableLoader> = {
 	title: "components/TableLoader",
 	component: TableLoader,
 	decorators: [
 		(Story) => (
-			<TableContainer>
-				<Table>
-					<TableBody>
-						<Story />
-					</TableBody>
-				</Table>
-			</TableContainer>
+			<Table>
+				<TableBody>
+					<Story />
+				</TableBody>
+			</Table>
 		),
 	],
 };

diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
@@ -1,5 +1,8 @@
-import TableCell from "@mui/material/TableCell";
-import TableRow, { type TableRowProps } from "@mui/material/TableRow";
+import {
+	TableCell,
+	TableRow,
+	type TableRowProps,
+} from "components/Table/Table";
 import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
 import { Loader } from "../Loader/Loader";
 

diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -1,6 +1,5 @@
 import { css, useTheme } from "@emotion/react";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
+import { TableCell, TableRow } from "components/Table/Table";
 import type { FC } from "react";
 import { createDisplayDate } from "./utils";
 

diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
@@ -1,4 +1,4 @@
-import TableRow, { type TableRowProps } from "@mui/material/TableRow";
+import { TableRow, type TableRowProps } from "components/Table/Table";
 import { forwardRef } from "react";
 import { cn } from "utils/cn";
 

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
@@ -8,32 +8,20 @@ import {
 	MockAuditLogWithWorkspaceBuild,
 	MockUserOwner,
 } from "testHelpers/entities";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Table, TableBody } from "components/Table/Table";
 import { AuditLogRow } from "./AuditLogRow";
 
 const meta: Meta<typeof AuditLogRow> = {
 	title: "pages/AuditPage/AuditLogRow",
 	component: AuditLogRow,
 	decorators: [
 		(Story) => (
-			<TableContainer>
-				<Table>
-					<TableHead>
-						<TableRow>
-							<TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
-						</TableRow>
-					</TableHead>
-					<TableBody>
-						<Story />
-					</TableBody>
-				</Table>
-			</TableContainer>
+			<Table>
+				<TableBody>
+					<Story />
+				</TableBody>
+			</Table>
 		),
 	],
 };

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -1,13 +1,13 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
-import TableCell from "@mui/material/TableCell";
 import Tooltip from "@mui/material/Tooltip";
 import type { AuditLog, BuildReason } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
+import { TableCell } from "components/Table/Table";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
 import { InfoIcon, NetworkIcon } from "lucide-react";
 import { type FC, useState } from "react";