add friendly col names

src/app/[orgId]/settings/(private)/remote-exit-nodes/ExitNodesTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { ExitNodesDataTable } from "./ExitNodesDataTable";
 import {
     DropdownMenu,
@@ -99,9 +100,10 @@ export default function ExitNodesTable({
             });
     };
 
-    const columns: ColumnDef<RemoteExitNodeRow>[] = [
+    const columns: ExtendedColumnDef<RemoteExitNodeRow>[] = [
         {
             accessorKey: "name",
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -118,6 +120,7 @@ export default function ExitNodesTable({
         },
         {
             accessorKey: "online",
+            friendlyName: t("online"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -152,6 +155,7 @@ export default function ExitNodesTable({
         },
         {
             accessorKey: "type",
+            friendlyName: t("connectionType"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -178,6 +182,7 @@ export default function ExitNodesTable({
         },
         {
             accessorKey: "address",
+            friendlyName: "Address",
             header: ({ column }) => {
                 return (
                     <Button
@@ -194,6 +199,7 @@ export default function ExitNodesTable({
         },
         {
             accessorKey: "endpoint",
+            friendlyName: "Endpoint",
             header: ({ column }) => {
                 return (
                     <Button

src/app/admin/users/AdminUsersTable.tsx

@@ -66,9 +66,10 @@ export default function UsersTable({ users }: Props) {
             });
     };
 
-    const columns: ColumnDef<GlobalUserRow>[] = [
+    const columns: ExtendedColumnDef<GlobalUserRow>[] = [
         {
             accessorKey: "id",
+            friendlyName: "ID",
             header: ({ column }) => {
                 return (
                     <Button
@@ -84,6 +85,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "username",
+            friendlyName: t("username"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -100,6 +102,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "email",
+            friendlyName: t("email"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -116,6 +119,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "name",
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -132,6 +136,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "idpName",
+            friendlyName: t("identityProvider"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -148,6 +153,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "twoFactorEnabled",
+            friendlyName: t("twoFactor"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/AdminIdpTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { IdpDataTable } from "@app/components/AdminIdpDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -77,9 +78,10 @@ export default function IdpTable({ idps }: Props) {
         }
     };
 
-    const columns: ColumnDef<IdpRow>[] = [
+    const columns: ExtendedColumnDef<IdpRow>[] = [
         {
             accessorKey: "idpId",
+            friendlyName: "ID",
             header: ({ column }) => {
                 return (
                     <Button
@@ -97,6 +99,7 @@ export default function IdpTable({ idps }: Props) {
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -113,6 +116,7 @@ export default function IdpTable({ idps }: Props) {
         },
         {
             accessorKey: "type",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/AdminUsersTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { UsersDataTable } from "@app/components/AdminUsersDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -85,9 +86,10 @@ export default function UsersTable({ users }: Props) {
             });
     };
 
-    const columns: ColumnDef<GlobalUserRow>[] = [
+    const columns: ExtendedColumnDef<GlobalUserRow>[] = [
         {
             accessorKey: "id",
+            friendlyName: "ID",
             header: ({ column }) => {
                 return (
                     <Button
@@ -104,6 +106,7 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "username",
             enableHiding: false,
+            friendlyName: t("username"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -120,6 +123,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "email",
+            friendlyName: t("email"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -136,6 +140,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "name",
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -152,6 +157,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "idpName",
+            friendlyName: t("identityProvider"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -168,6 +174,7 @@ export default function UsersTable({ users }: Props) {
         },
         {
             accessorKey: "twoFactorEnabled",
+            friendlyName: t("twoFactor"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/ApiKeysTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -85,10 +86,11 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
             });
     };
 
-    const columns: ColumnDef<ApiKeyRow>[] = [
+    const columns: ExtendedColumnDef<ApiKeyRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -105,6 +107,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
         },
         {
             accessorKey: "key",
+            friendlyName: t("key"),
             header: () => (<span className="p-3">{t("key")}</span>),
             cell: ({ row }) => {
                 const r = row.original;
@@ -113,6 +116,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
         },
         {
             accessorKey: "createdAt",
+            friendlyName: t("createdAt"),
             header: () => (<span className="p-3">{t("createdAt")}</span>),
             cell: ({ row }) => {
                 const r = row.original;

src/components/BlueprintsTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
 import {
     ArrowRight,
@@ -30,9 +31,10 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
     const [isRefreshing, startTransition] = useTransition();
     const router = useRouter();
 
-    const columns: ColumnDef<BlueprintRow>[] = [
+    const columns: ExtendedColumnDef<BlueprintRow>[] = [
         {
             accessorKey: "createdAt",
+            friendlyName: t("appliedAt"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -62,6 +64,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -79,6 +82,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
 
         {
             accessorKey: "source",
+            friendlyName: t("source"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/ClientsTable.tsx

@@ -12,6 +12,7 @@ import {
     getFilteredRowModel,
     VisibilityState
 } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -330,11 +331,12 @@ export default function ClientsTable({
         return currentData?.some((client) => !client.userId) ?? false;
     }, [currentView, machineClients, userClients]);
 
-    const columns: ColumnDef<ClientRow>[] = useMemo(() => {
+    const columns: ExtendedColumnDef<ClientRow>[] = useMemo(() => {
-        const baseColumns: ColumnDef<ClientRow>[] = [
+        const baseColumns: ExtendedColumnDef<ClientRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: "Name",
             header: ({ column }) => {
                 return (
                     <Button
@@ -351,6 +353,7 @@ export default function ClientsTable({
         },
         {
             accessorKey: "userId",
+            friendlyName: "User",
             header: ({ column }) => {
                 return (
                     <Button
@@ -409,6 +412,7 @@ export default function ClientsTable({
         // },
         {
             accessorKey: "online",
+            friendlyName: "Connectivity",
             header: ({ column }) => {
                 return (
                     <Button
@@ -443,6 +447,7 @@ export default function ClientsTable({
         },
         {
             accessorKey: "mbIn",
+            friendlyName: "Data In",
             header: ({ column }) => {
                 return (
                     <Button
@@ -459,6 +464,7 @@ export default function ClientsTable({
         },
         {
             accessorKey: "mbOut",
+            friendlyName: "Data Out",
             header: ({ column }) => {
                 return (
                     <Button
@@ -475,6 +481,7 @@ export default function ClientsTable({
         },
         {
             accessorKey: "client",
+            friendlyName: t("client"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -512,6 +519,7 @@ export default function ClientsTable({
         },
         {
             accessorKey: "subnet",
+            friendlyName: "Address",
             header: ({ column }) => {
                 return (
                     <Button

src/components/ContainersSelector.tsx

@@ -7,6 +7,7 @@ import {
     getFilteredRowModel,
     VisibilityState
 } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@/components/ui/button";
 import {
     Credenza,
@@ -181,9 +182,10 @@ const DockerContainersTable: FC<{
         [getExposedPorts]
     );
 
-    const columns: ColumnDef<Container>[] = [
+    const columns: ExtendedColumnDef<Container>[] = [
         {
             accessorKey: "name",
+            friendlyName: t("containerName"),
             header: () => (<span className="p-3">{t("containerName")}</span>),
             cell: ({ row }) => (
                 <div className="font-medium">{row.original.name}</div>
@@ -191,6 +193,7 @@ const DockerContainersTable: FC<{
         },
         {
             accessorKey: "image",
+            friendlyName: t("containerImage"),
             header: () => (<span className="p-3">{t("containerImage")}</span>),
             cell: ({ row }) => (
                 <div className="text-sm text-muted-foreground">
@@ -200,6 +203,7 @@ const DockerContainersTable: FC<{
         },
         {
             accessorKey: "state",
+            friendlyName: t("containerState"),
             header: () => (<span className="p-3">{t("containerState")}</span>),
             cell: ({ row }) => (
                 <Badge
@@ -215,6 +219,7 @@ const DockerContainersTable: FC<{
         },
         {
             accessorKey: "networks",
+            friendlyName: t("containerNetworks"),
             header: () => (<span className="p-3">{t("containerNetworks")}</span>),
             cell: ({ row }) => {
                 const networks = Object.keys(row.original.networks);
@@ -233,6 +238,7 @@ const DockerContainersTable: FC<{
         },
         {
             accessorKey: "hostname",
+            friendlyName: t("containerHostnameIp"),
             header: () => (<span className="p-3">{t("containerHostnameIp")}</span>),
             enableHiding: false,
             cell: ({ row }) => (
@@ -243,6 +249,7 @@ const DockerContainersTable: FC<{
         },
         {
             accessorKey: "labels",
+            friendlyName: t("containerLabels"),
             header: () => (<span className="p-3">{t("containerLabels")}</span>),
             cell: ({ row }) => {
                 const labels = row.original.labels || {};

src/components/DNSRecordTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { useTranslations } from "next-intl";
 import { Badge } from "@app/components/ui/badge";
 import { DNSRecordsDataTable } from "./DNSRecordsDataTable";
@@ -25,9 +26,10 @@ export default function DNSRecordsTable({
 }: Props) {
     const t = useTranslations();
 
-    const columns: ColumnDef<DNSRecordRow>[] = [
+    const columns: ExtendedColumnDef<DNSRecordRow>[] = [
         {
             accessorKey: "baseDomain",
+            friendlyName: t("recordName", { fallback: "Record name" }),
             header: ({ column }) => {
                 return (
                     <div>{t("recordName", { fallback: "Record name" })}</div>
@@ -48,6 +50,7 @@ export default function DNSRecordsTable({
         },
         {
             accessorKey: "recordType",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return <div>{t("type")}</div>;
             },
@@ -58,6 +61,7 @@ export default function DNSRecordsTable({
         },
         {
             accessorKey: "ttl",
+            friendlyName: t("TTL"),
             header: ({ column }) => {
                 return <div>{t("TTL")}</div>;
             },
@@ -67,6 +71,7 @@ export default function DNSRecordsTable({
         },
         {
             accessorKey: "value",
+            friendlyName: t("value"),
             header: () => {
                 return <div>{t("value")}</div>;
             },
@@ -83,6 +88,7 @@ export default function DNSRecordsTable({
         },
         {
             accessorKey: "verified",
+            friendlyName: t("status"),
             header: ({ column }) => {
                 return <div>{t("status")}</div>;
             },

src/components/DomainsTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { DomainsDataTable } from "@app/components/DomainsDataTable";
 import { Button } from "@app/components/ui/button";
 import {
@@ -134,10 +135,11 @@ export default function DomainsTable({ domains, orgId }: Props) {
         }
     };
 
-    const columns: ColumnDef<DomainRow>[] = [
+    const columns: ExtendedColumnDef<DomainRow>[] = [
         {
             accessorKey: "baseDomain",
             enableHiding: false,
+            friendlyName: t("domain"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -154,6 +156,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
         },
         {
             accessorKey: "type",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -176,6 +179,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
         },
         {
             accessorKey: "verified",
+            friendlyName: t("status"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/GenerateLicenseKeysTable.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "./ui/button";
 import { ArrowUpDown } from "lucide-react";
 import CopyToClipboard from "./CopyToClipboard";
@@ -63,9 +64,10 @@ export default function GenerateLicenseKeysTable({
         }
     };
 
-    const columns: ColumnDef<GeneratedLicenseKey>[] = [
+    const columns: ExtendedColumnDef<GeneratedLicenseKey>[] = [
         {
             accessorKey: "licenseKey",
+            friendlyName: t("licenseKey"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -91,6 +93,7 @@ export default function GenerateLicenseKeysTable({
         },
         {
             accessorKey: "instanceName",
+            friendlyName: t("instanceName"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -110,6 +113,7 @@ export default function GenerateLicenseKeysTable({
         },
         {
             accessorKey: "valid",
+            friendlyName: t("valid"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -133,6 +137,7 @@ export default function GenerateLicenseKeysTable({
         },
         {
             accessorKey: "type",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -155,6 +160,7 @@ export default function GenerateLicenseKeysTable({
         },
         {
             accessorKey: "terminateAt",
+            friendlyName: t("licenseTableValidUntil"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/InvitationsTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -66,14 +67,16 @@ export default function InvitationsTable({
         }
     };
 
-    const columns: ColumnDef<InvitationRow>[] = [
+    const columns: ExtendedColumnDef<InvitationRow>[] = [
         {
             accessorKey: "email",
             enableHiding: false,
+            friendlyName: t("email"),
             header: () => (<span className="p-3">{t("email")}</span>)
         },
         {
             accessorKey: "expiresAt",
+            friendlyName: t("expiresAt"),
             header: () => (<span className="p-3">{t("expiresAt")}</span>),
             cell: ({ row }) => {
                 const expiresAt = new Date(row.original.expiresAt);
@@ -88,6 +91,7 @@ export default function InvitationsTable({
         },
         {
             accessorKey: "role",
+            friendlyName: t("role"),
             header: () => (<span className="p-3">{t("role")}</span>)
         },
         {

src/components/LicenseKeysDataTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { DataTable } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
 import { Badge } from "@app/components/ui/badge";
@@ -30,10 +31,11 @@ export function LicenseKeysDataTable({
 }: LicenseKeysDataTableProps) {
     const t = useTranslations();
 
-    const columns: ColumnDef<LicenseKeyCache>[] = [
+    const columns: ExtendedColumnDef<LicenseKeyCache>[] = [
         {
             accessorKey: "licenseKey",
             enableHiding: false,
+            friendlyName: t("licenseKey"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -59,6 +61,7 @@ export function LicenseKeysDataTable({
         },
         {
             accessorKey: "valid",
+            friendlyName: t("valid"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -82,6 +85,7 @@ export function LicenseKeysDataTable({
         },
         {
             accessorKey: "tier",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -104,6 +108,7 @@ export function LicenseKeysDataTable({
         },
         {
             accessorKey: "terminateAt",
+            friendlyName: t("licenseTableValidUntil"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/OrgApiKeysTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { OrgApiKeysDataTable } from "@app/components/OrgApiKeysDataTable";
 import {
     DropdownMenu,
@@ -88,10 +89,11 @@ export default function OrgApiKeysTable({
             });
     };
 
-    const columns: ColumnDef<OrgApiKeyRow>[] = [
+    const columns: ExtendedColumnDef<OrgApiKeyRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -108,6 +110,7 @@ export default function OrgApiKeysTable({
         },
         {
             accessorKey: "key",
+            friendlyName: t("key"),
             header: () => (<span className="p-3">{t("key")}</span>),
             cell: ({ row }) => {
                 const r = row.original;
@@ -116,6 +119,7 @@ export default function OrgApiKeysTable({
         },
         {
             accessorKey: "createdAt",
+            friendlyName: t("createdAt"),
             header: () => (<span className="p-3">{t("createdAt")}</span>),
             cell: ({ row }) => {
                 const r = row.original;

src/components/PolicyTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
 import {
     ArrowUpDown,
@@ -36,10 +37,11 @@ interface Props {
 
 export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props) {
     const t = useTranslations();
-    const columns: ColumnDef<PolicyRow>[] = [
+    const columns: ExtendedColumnDef<PolicyRow>[] = [
         {
             accessorKey: "orgId",
             enableHiding: false,
+            friendlyName: t('orgId'),
             header: ({ column }) => {
                 return (
                     <Button
@@ -56,6 +58,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
         },
         {
             accessorKey: "roleMapping",
+            friendlyName: t('roleMapping'),
             header: ({ column }) => {
                 return (
                     <Button
@@ -83,6 +86,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
         },
         {
             accessorKey: "orgMapping",
+            friendlyName: t('orgMapping'),
             header: ({ column }) => {
                 return (
                     <Button

src/components/ResourcesTable.tsx

@@ -12,6 +12,7 @@ import {
     getFilteredRowModel,
     VisibilityState
 } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -583,10 +584,11 @@ export default function ResourcesTable({
         );
     }
 
-    const proxyColumns: ColumnDef<ResourceRow>[] = [
+    const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -603,6 +605,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "nice",
+            friendlyName: t("resource"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -619,6 +622,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "protocol",
+            friendlyName: t("protocol"),
             header: () => <span className="p-3">{t("protocol")}</span>,
             cell: ({ row }) => {
                 const resourceRow = row.original;
@@ -636,6 +640,7 @@ export default function ResourcesTable({
         {
             id: "status",
             accessorKey: "status",
+            friendlyName: t("status"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -667,6 +672,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "domain",
+            friendlyName: t("access"),
             header: () => <span className="p-3">{t("access")}</span>,
             cell: ({ row }) => {
                 const resourceRow = row.original;
@@ -694,6 +700,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "authState",
+            friendlyName: t("authentication"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -730,6 +737,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "enabled",
+            friendlyName: t("enabled"),
             header: () => <span className="p-3">{t("enabled")}</span>,
             cell: ({ row }) => (
                 <Switch
@@ -846,10 +854,11 @@ export default function ResourcesTable({
         }
     ];
 
-    const internalColumns: ColumnDef<InternalResourceRow>[] = [
+    const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -866,6 +875,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "siteName",
+            friendlyName: t("siteName"),
             header: () => <span className="p-3">{t("siteName")}</span>,
             cell: ({ row }) => {
                 const resourceRow = row.original;
@@ -883,6 +893,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "mode",
+            friendlyName: t("editInternalResourceDialogMode"),
             header: () => (
                 <span className="p-3">
                     {t("editInternalResourceDialogMode")}
@@ -900,6 +911,7 @@ export default function ResourcesTable({
         },
         {
             accessorKey: "destination",
+            friendlyName: t("resourcesTableDestination"),
             header: () => (
                 <span className="p-3">{t("resourcesTableDestination")}</span>
             ),

src/components/RolesTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -61,10 +62,11 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
         }
     };
 
-    const columns: ColumnDef<RoleRow>[] = [
+    const columns: ExtendedColumnDef<RoleRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -81,6 +83,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
         },
         {
             accessorKey: "description",
+            friendlyName: t("description"),
             header: () => (<span className="p-3">{t("description")}</span>)
         },
         {

src/components/ShareLinksTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { ShareLinksDataTable } from "@app/components/ShareLinksDataTable";
 import {
     DropdownMenu,
@@ -102,10 +103,11 @@ export default function ShareLinksTable({
         });
     }
 
-    const columns: ColumnDef<ShareLinkRow>[] = [
+    const columns: ExtendedColumnDef<ShareLinkRow>[] = [
         {
             accessorKey: "resourceName",
             enableHiding: false,
+            friendlyName: t("resource"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -133,6 +135,7 @@ export default function ShareLinksTable({
         },
         {
             accessorKey: "title",
+            friendlyName: t("title"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -212,6 +215,7 @@ export default function ShareLinksTable({
         // },
         {
             accessorKey: "createdAt",
+            friendlyName: t("created"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -232,6 +236,7 @@ export default function ShareLinksTable({
         },
         {
             accessorKey: "expiresAt",
+            friendlyName: t("expires"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/SitesTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Column, ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { SitesDataTable } from "@app/components/SitesDataTable";
 import {
     DropdownMenu,
@@ -106,7 +107,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             });
     };
 
-    const columns: ColumnDef<SiteRow>[] = [
+    const columns: ExtendedColumnDef<SiteRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
@@ -126,6 +127,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "online",
+            friendlyName: t("online"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -167,6 +169,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "nice",
+            friendlyName: t("site"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -191,6 +194,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "mbIn",
+            friendlyName: t("dataIn"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -210,6 +214,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "mbOut",
+            friendlyName: t("dataOut"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -229,6 +234,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "type",
+            friendlyName: t("connectionType"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -286,6 +292,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "exitNode",
+            friendlyName: t("exitNode"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/UsersTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -70,10 +71,11 @@ export default function UsersTable({ users: u }: UsersTableProps) {
         }
     };
 
-    const columns: ColumnDef<UserRow>[] = [
+    const columns: ExtendedColumnDef<UserRow>[] = [
         {
             accessorKey: "displayUsername",
             enableHiding: false,
+            friendlyName: t("username"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -90,6 +92,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
         },
         {
             accessorKey: "idpName",
+            friendlyName: t("identityProvider"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -116,6 +119,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
         },
         {
             accessorKey: "role",
+            friendlyName: t("role"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/private/OrgIdpTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { IdpDataTable } from "@app/components/private/OrgIdpDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -59,9 +60,10 @@ export default function IdpTable({ idps, orgId }: Props) {
     };
 
 
-    const columns: ColumnDef<IdpRow>[] = [
+    const columns: ExtendedColumnDef<IdpRow>[] = [
         {
             accessorKey: "idpId",
+            friendlyName: "ID",
             header: ({ column }) => {
                 return (
                     <Button
@@ -78,6 +80,7 @@ export default function IdpTable({ idps, orgId }: Props) {
         },
         {
             accessorKey: "name",
+            friendlyName: t("name"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -94,6 +97,7 @@ export default function IdpTable({ idps, orgId }: Props) {
         },
         {
             accessorKey: "type",
+            friendlyName: t("type"),
             header: ({ column }) => {
                 return (
                     <Button

src/components/ui/data-table.tsx

@@ -12,6 +12,11 @@ import {
     getFilteredRowModel,
     VisibilityState
 } from "@tanstack/react-table";
+
+// Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
+export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    friendlyName?: string;
+};
 import {
     Table,
     TableBody,
@@ -132,7 +137,7 @@ type TabFilter = {
 };
 
 type DataTableProps<TData, TValue> = {
-    columns: ColumnDef<TData, TValue>[];
+    columns: ExtendedColumnDef<TData, TValue>[];
     data: TData[];
     title?: string;
     addButtonText?: string;
@@ -421,6 +426,12 @@ export function DataTable<TData, TValue>({
                                                                             .getAllColumns()
                                                                             .filter((column) => column.getCanHide())
                                                                             .map((column) => {
+                                                                                const columnDef = column.columnDef as any;
+                                                                                const friendlyName = columnDef.friendlyName;
+                                                                                const displayName = friendlyName || 
+                                                                                    (typeof columnDef.header === "string" 
+                                                                                        ? columnDef.header 
+                                                                                        : column.id);
                                                                                 return (
                                                                                     <DropdownMenuCheckboxItem
                                                                                         key={column.id}
@@ -430,9 +441,7 @@ export function DataTable<TData, TValue>({
                                                                                             column.toggleVisibility(!!value)
                                                                                         }
                                                                                     >
-                                                                                        {typeof column.columnDef.header === "string"
+                                                                                        {displayName}
-                                                                                            ? column.columnDef.header
-                                                                                            : column.id}
                                                                                     </DropdownMenuCheckboxItem>
                                                                                 );
                                                                             })}