diff --git a/src/components/kubernetes-operator/OperatorPermissionsTable.tsx b/src/components/kubernetes-operator/OperatorPermissionsTable.tsx
new file mode 100644
index 00000000..bd8b9d9d
--- /dev/null
+++ b/src/components/kubernetes-operator/OperatorPermissionsTable.tsx
@@ -0,0 +1,198 @@
+import React from 'react';
+import {
+ Table,
+ TableHeader,
+ TableBody,
+ TableRow,
+ TableHead,
+ TableCell,
+} from '@/components/ui/table';
+import {
+ useReactTable,
+ getCoreRowModel,
+ flexRender,
+} from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
+import permissionsData from '@/data/kubernetes/operator-permissions.json';
+
+type PermissionRow = {
+ kind?: string;
+ name?: string;
+ apiGroup?: string;
+ resources?: string[];
+ verbs: string[];
+ nonResourceUrls?: string[];
+};
+
+const rows = permissionsData as PermissionRow[];
+
+const headerCellStyle: React.CSSProperties = {
+ textAlign: 'left',
+ border: '1px solid #999CAD',
+ background: '#AFB2C2',
+ color: 'var(--sl-color-gray-1)',
+ fontFamily: 'AeonikFono',
+ fontSize: '14px',
+ fontWeight: '500',
+ lineHeight: '16px',
+ letterSpacing: '-0.15px',
+ padding: '12px 8px',
+};
+
+const bodyCellStyle: React.CSSProperties = {
+ verticalAlign: 'top',
+ textAlign: 'left',
+ border: '1px solid #999CAD',
+ color: 'var(--sl-color-gray-1)',
+ fontFamily: 'AeonikFono',
+ fontSize: '14px',
+ fontWeight: '400',
+ lineHeight: '16px',
+ letterSpacing: '-0.15px',
+ padding: '12px 8px',
+ whiteSpace: 'normal',
+};
+
+const renderCodeList = (values?: string[]) => {
+ if (!values?.length) return null;
+ return (
+ <>
+ {values.map((value, index) => (
+
+ {value}
+ {index < values.length - 1 ? ', ' : ''}
+
+ ))}
+
+ );
+};
+
+const columns: ColumnDef[] = [
+ {
+ accessorKey: 'kind',
+ header: () => 'Kind',
+ cell: ({ row }) => (row.original.kind ? {row.original.kind} : null),
+ },
+ {
+ accessorKey: 'name',
+ header: () => 'Name',
+ cell: ({ row }) => (row.original.name ? {row.original.name} : null),
+ },
+ {
+ accessorKey: 'apiGroup',
+ header: () => 'API Groups',
+ cell: ({ row }) => (row.original.apiGroup ? {row.original.apiGroup} : null),
+ },
+ {
+ id: 'resources',
+ header: () => 'Resources',
+ cell: ({ row }) =>
+ row.original.nonResourceUrls?.length ? (
+ <> (nonResourceURLs: {renderCodeList(row.original.nonResourceUrls)})
+ ) : (
+ renderCodeList(row.original.resources)
+ ),
+ },
+ {
+ id: 'verbs',
+ header: () => 'Verbs',
+ cell: ({ row }) => row.original.verbs.join(', '),
+ },
+];
+
+export default function OperatorPermissionsTable() {
+ const table = useReactTable({
+ data: rows,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ debugTable: false,
+ });
+
+ const getColumnWidth = (columnId: string) => {
+ switch (columnId) {
+ case 'kind':
+ return '14%';
+ case 'name':
+ return '24%';
+ case 'apiGroup':
+ return '16%';
+ case 'resources':
+ return '23%';
+ case 'verbs':
+ return '23%';
+ default:
+ return 'auto';
+ }
+ };
+
+ const getMinWidth = (columnId: string) => {
+ switch (columnId) {
+ case 'kind':
+ return '110px';
+ case 'name':
+ return '220px';
+ case 'apiGroup':
+ return '170px';
+ case 'resources':
+ return '260px';
+ case 'verbs':
+ return '300px';
+ default:
+ return '80px';
+ }
+ };
+
+ return (
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+ {flexRender(header.column.columnDef.header, header.getContext())}
+
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+ ))}
+
+
+