fleetdm · MagnusHJensen · Jun 17, 2026 · Jun 11, 2026 · Jun 12, 2026 · Jun 17, 2026
@@ -33,9 +33,9 @@ describe("HostMdmStatusCell", () => {
     expect(screen.getByText("On (company-owned)")).toBeInTheDocument();
   });
 
-  it("renders 'On (personal)' for iOS hosts with personal enrollment", () => {
+  it("renders 'On (BYOD)' for iOS hosts with personal enrollment", () => {
     renderCell("ios", "On (personal)");
-    expect(screen.getByText("On (personal)")).toBeInTheDocument();
+    expect(screen.getByText("On (BYOD)")).toBeInTheDocument();
   });
 
   it("renders 'Pending' for macOS hosts with pending enrollment", () => {
@@ -45,7 +45,7 @@ describe("HostMdmStatusCell", () => {
 
   it("renders the MDM status for Android hosts", () => {
     renderCell("android", "On (personal)");
-    expect(screen.getByText("On (personal)")).toBeInTheDocument();
+    expect(screen.getByText("On (BYOD)")).toBeInTheDocument();
   });
 
   it("renders the MDM status for Windows hosts", () => {

@@ -36,6 +36,7 @@ export interface IMdmAbToken {
   macos_fleet: ITokenFleet;
   ios_fleet: ITokenFleet;
   ipados_fleet: ITokenFleet;
+  byod_fleet: ITokenFleet;
 }
 
 export interface IMdmVppToken {
@@ -96,7 +97,7 @@ export const MDM_ENROLLMENT_STATUS_UI_MAP: Record<
     filterValue: "automatic",
   },
   "On (personal)": {
-    displayName: "On (personal)",
+    displayName: "On (BYOD)",
     filterValue: "personal",
   },
   Off: {

@@ -65,7 +65,7 @@ describe("MDM Card", () => {
     ).toBeInTheDocument();
     expect(
       screen.getByRole("row", {
-        name: /On \(personal\)(.*?)3 view all hosts/i,
+        name: /On \(BYOD\)(.*?)3 view all hosts/i,
       })
     ).toBeInTheDocument();
 

@@ -184,8 +184,7 @@ const AppleBusinessManagerPage = ({ router }: { router: InjectedRouter }) => {
         <>
           <p>
             Add your AB to enable automatic enrollment for company-owned hosts
-            and enrollment, via a Managed Apple Account, for personal (BYOD)
-            hosts.
+            and enrollment, via a Managed Apple Account, for BYOD hosts.
           </p>
           <AppleBusinessManagerTable
             abTokens={abTokens}

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { IMdmAbToken } from "interfaces/mdm";
 import useGitOpsMode from "hooks/useGitOpsMode";
 
 import TableContainer from "components/TableContainer";
+import { ITableQueryData } from "components/TableContainer/TableContainer";
 
 import { generateTableConfig } from "./AppleBusinessManagerTableConfig";
 
@@ -23,6 +24,13 @@ const AppleBusinessManagerTable = ({
   onDeleteToken,
 }: IAppleBusinessManagerTableProps) => {
   const { gitOpsModeEnabled, repoURL } = useGitOpsMode();
+  const [searchQuery, setSearchQuery] = useState("");
+  const normalizedQuery = searchQuery.toLowerCase();
+  const filteredAbTokens = normalizedQuery
+    ? abTokens.filter((token) =>
+        token.org_name.toLowerCase().includes(normalizedQuery)
+      )
+    : abTokens;
 
   const onSelectAction = (action: string, abmToken: IMdmAbToken) => {
     switch (action) {
@@ -46,18 +54,25 @@ const AppleBusinessManagerTable = ({
     repoURL
   );
 
+  const onQueryChange = (queryData: ITableQueryData) => {
+    setSearchQuery(queryData.searchQuery);
+  };
+
   return (
     <TableContainer<IMdmAbToken>
       columnConfigs={tableConfig}
       defaultSortHeader="org_name"
-      disableTableHeader
       disablePagination
       showMarkAllPages={false}
       isAllPagesSelected={false}
       emptyComponent={() => <></>}
       isLoading={false}
-      data={abTokens}
+      data={filteredAbTokens}
       className={baseClass}
+      searchable
+      inputPlaceHolder="Search by organization name"
+      searchQuery={searchQuery}
+      onQueryChange={onQueryChange}
     />
   );
 };

@@ -92,8 +92,13 @@ export const generateTableConfig = (
     },
     {
       accessor: "renew_date",
-      Header: "Renew date",
-      disableSortBy: true,
+      sortType: "dateStrings",
+      Header: (cellProps: ITableHeaderProps) => (
+        <HeaderCell
+          value="Renew date"
+          isSortedDesc={cellProps.column.isSortedDesc}
+        />
+      ),
       Cell: (cellProps: IRenewDateCellProps) => (
         <RenewDateCell
           value={cellProps.cell.value}
@@ -102,18 +107,11 @@ export const generateTableConfig = (
         />
       ),
     },
-    {
-      accessor: "apple_id",
-      Header: "Apple ID",
-      disableSortBy: true,
-      Cell: (cellProps: ITableStringCellProps) => (
-        <TextCell value={cellProps.cell.value} />
-      ),
-    },
     {
       id: "macos_team",
+      sortType: "caseInsensitive",
       accessor: (originalRow) => getFleetDisplayName(originalRow.macos_fleet),
-      Header: () => {
+      Header: (cellProps: ITableHeaderProps) => {
         const titleWithToolTip = (
           <TooltipWrapper
             tipContent={
@@ -128,17 +126,22 @@ export const generateTableConfig = (
             macOS fleet
           </TooltipWrapper>
         );
-        return <HeaderCell value={titleWithToolTip} disableSortBy />;
+        return (
+          <HeaderCell
+            value={titleWithToolTip}
+            isSortedDesc={cellProps.column.isSortedDesc}
+          />
+        );
       },
-      disableSortBy: true,
       Cell: (cellProps: ITableStringCellProps) => (
         <TextCell value={cellProps.cell.value} />
       ),
     },
     {
       id: "ios_team",
+      sortType: "caseInsensitive",
       accessor: (originalRow) => getFleetDisplayName(originalRow.ios_fleet),
-      Header: () => {
+      Header: (cellProps: ITableHeaderProps) => {
         const titleWithToolTip = (
           <TooltipWrapper
             tipContent={
@@ -153,17 +156,22 @@ export const generateTableConfig = (
             iOS fleet
           </TooltipWrapper>
         );
-        return <HeaderCell value={titleWithToolTip} disableSortBy />;
+        return (
+          <HeaderCell
+            value={titleWithToolTip}
+            isSortedDesc={cellProps.column.isSortedDesc}
+          />
+        );
       },
-      disableSortBy: true,
       Cell: (cellProps: ITableStringCellProps) => (
         <TextCell value={cellProps.cell.value} />
       ),
     },
     {
       id: "ipados_team",
+      sortType: "caseInsensitive",
       accessor: (originalRow) => getFleetDisplayName(originalRow.ipados_fleet),
-      Header: () => {
+      Header: (cellProps: ITableHeaderProps) => {
         const titleWithToolTip = (
           <TooltipWrapper
             tipContent={
@@ -178,9 +186,41 @@ export const generateTableConfig = (
             iPadOS fleet
           </TooltipWrapper>
         );
-        return <HeaderCell value={titleWithToolTip} disableSortBy />;
+        return (
+          <HeaderCell
+            value={titleWithToolTip}
+            isSortedDesc={cellProps.column.isSortedDesc}
+          />
+        );
+      },
+      Cell: (cellProps: ITableStringCellProps) => (
+        <TextCell value={cellProps.cell.value} />
+      ),
+    },
+    {
+      id: "byod_team",
+      sortType: "caseInsensitive",
+      accessor: (originalRow) => getFleetDisplayName(originalRow.byod_fleet),
+      Header: (cellProps: ITableHeaderProps) => {
+        const titleWithToolTip = (
+          <TooltipWrapper
+            tipContent={
+              <>
+                iOS/iPadOS hosts that enroll via Managed Apple Account are
+                automatically added to this fleet.
+              </>
+            }
+          >
+            BYOD fleet
+          </TooltipWrapper>
+        );
+        return (
+          <HeaderCell
+            value={titleWithToolTip}
+            isSortedDesc={cellProps.column.isSortedDesc}
+          />
+        );
       },
-      disableSortBy: true,
       Cell: (cellProps: ITableStringCellProps) => (
         <TextCell value={cellProps.cell.value} />
       ),

@@ -1,12 +1,9 @@
 .apple-business-manager-table {
   .data-table-block .data-table {
-    td.apple_id__cell {
-      max-width: 180px;
-    }
-
     td.macos_team__cell,
     td.ios_team__cell,
-    td.ipados_team__cell {
+    td.ipados_team__cell,
+    td.byod_team__cell {
       max-width: 150px;
     }
 
@@ -16,29 +13,33 @@
         align-items: center;
       }
     }
+
+    th.id__header {
+      border: none;
+    }
   }
 
   // The desired behavior is to hide the header and team cell one by one
   // as the viewport gets smaller. This is achieved by using the max-width
   // media query with the breakpoint values taken from when the table content
   // starts to overflow.
   @media (max-width: $break-lg) {
-    .ipados_team__header,
-    .ipados_team__cell {
+    .byod_team__header,
+    .byod_team__cell {
       display: none;
     }
   }
 
   @media (max-width: 1230px) {
-    .ios_team__header,
-    .ios_team__cell {
+    .ipados_team__header,
+    .ipados_team__cell {
       display: none;
     }
   }
 
   @media (max-width: $break-md) {
-    .macos_team__header,
-    .macos_team__cell {
+    .ios_team__header,
+    .ios_team__cell {
       display: none;
     }
   }

@@ -10,6 +10,7 @@ describe("EditTeamsAbmModal", () => {
     APP_CONTEXT_NO_TEAM_SUMMARY,
     { name: "Team 1", id: 1 },
     { name: "Team 2", id: 2 },
+    { name: "BYOD Fleet", id: 3 },
   ];
 
   describe("getOptions", () => {
@@ -30,11 +31,13 @@ describe("EditTeamsAbmModal", () => {
         ios_team: "Team 1",
         ipados_team: "Team 2",
         macos_team: "Unassigned",
+        byod_team: "BYOD Fleet",
       };
       expect(getSelectedTeamIds(selectedTeamNames, availableTeams)).toEqual({
         ios_fleet_id: 1,
         ipados_fleet_id: 2,
         macos_fleet_id: 0,
+        byod_fleet_id: 3,
       });
     });
   });