feat: DataTable component should use a "key" of data as the selection Key. (#17714)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

Author: Amit91848

packages/features/ee/teams/components/MemberList.tsx

@@ -177,6 +177,7 @@ export default function MemberList(props: Props) {
 
   // TODO (SEAN): Make Column filters a trpc query param so we can fetch serverside even if the data is not loaded
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState({});
 
   const removeMemberFromCache = ({
     utils,
@@ -602,12 +603,15 @@ export default function MemberList(props: Props) {
     },
     state: {
       columnFilters,
+      rowSelection,
     },
     onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
+    getRowId: (row) => `${row.id}`,
   });
 
   const fetchMoreOnBottomReached = useFetchMoreOnBottomReached(

packages/features/users/components/UserTable/UserListTable.tsx

@@ -120,6 +120,7 @@ export function UserListTable() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
   const [isDownloading, setIsDownloading] = useState(false);
+  const [rowSelection, setRowSelection] = useState({});
 
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
@@ -385,12 +386,15 @@ export function UserListTable() {
     },
     state: {
       columnFilters,
+      rowSelection,
     },
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     // TODO(SEAN): We need to move filter state to the server so we can fetch more data when the filters change if theyre not in client cache
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    onRowSelectionChange: setRowSelection,
+    getRowId: (row) => `${row.id}`,
     getFacetedUniqueValues: (_, columnId) => () => {
       if (facetedTeamValues) {
         switch (columnId) {