1 files changed, 51 insertions, 36 deletions

diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx
index a1ee217e8..03971a5cc 100644
--- a/frontend/src/pages/Settings/Languages/table.tsx
+++ b/frontend/src/pages/Settings/Languages/table.tsx
@@ -1,18 +1,19 @@
-import { Action, SimpleTable } from "@/components";
+import { FunctionComponent, useCallback, useMemo } from "react";
+import { Badge, Button, Group } from "@mantine/core";
+import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { ColumnDef } from "@tanstack/react-table";
+import { cloneDeep } from "lodash";
+import { Action } from "@/components";
 import {
-  ProfileEditModal,
   anyCutoff,
+  ProfileEditModal,
 } from "@/components/forms/ProfileEditForm";
+import SimpleTable from "@/components/tables/SimpleTable";
 import { useModals } from "@/modules/modals";
+import { languageProfileKey } from "@/pages/Settings/keys";
+import { useFormActions } from "@/pages/Settings/utilities/FormValues";
 import { BuildKey, useArrayAction } from "@/utilities";
-import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
-import { Badge, Button, Group } from "@mantine/core";
-import { cloneDeep } from "lodash";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
 import { useLatestEnabledLanguages, useLatestProfiles } from ".";
-import { languageProfileKey } from "../keys";
-import { useFormActions } from "../utilities/FormValues";
 
 const Table: FunctionComponent = () => {
   const profiles = useLatestProfiles();
@@ -40,6 +41,7 @@ const Table: FunctionComponent = () => {
   const updateProfile = useCallback(
     (profile: Language.Profile) => {
       const list = [...profiles];
+
       const idx = list.findIndex((v) => v.profileId === profile.profileId);
 
       if (idx !== -1) {
@@ -57,20 +59,26 @@ const Table: FunctionComponent = () => {
     submitProfiles(fn(list));
   });
 
-  const columns = useMemo<Column<Language.Profile>[]>(
+  const columns = useMemo<ColumnDef<Language.Profile>[]>(
     () => [
       {
-        Header: "Name",
-        accessor: "name",
+        header: "Name",
+        accessorKey: "name",
+      },
+      {
+        header: "Tag",
+        accessorKey: "tag",
       },
       {
-        Header: "Languages",
-        accessor: "items",
-        Cell: (row) => {
-          const items = row.value;
-          const cutoff = row.row.original.cutoff;
+        header: "Languages",
+        accessorKey: "items",
+        cell: ({
+          row: {
+            original: { items, cutoff },
+          },
+        }) => {
           return (
-            <Group spacing="xs" noWrap>
+            <Group gap="xs" wrap="nowrap">
               {items.map((v) => {
                 const isCutoff = v.id === cutoff || cutoff === anyCutoff;
                 return (
@@ -82,16 +90,19 @@ const Table: FunctionComponent = () => {
         },
       },
       {
-        Header: "Must contain",
-        accessor: "mustContain",
-        Cell: (row) => {
-          const items = row.value;
-          if (!items) {
+        header: "Must contain",
+        accessorKey: "mustContain",
+        cell: ({
+          row: {
+            original: { mustContain },
+          },
+        }) => {
+          if (!mustContain) {
             return null;
           }
           return (
             <>
-              {items.map((v, idx) => {
+              {mustContain.map((v, idx) => {
                 return (
                   <Badge key={BuildKey(idx, v)} color="gray">
                     {v}
@@ -103,16 +114,19 @@ const Table: FunctionComponent = () => {
         },
       },
       {
-        Header: "Must not contain",
-        accessor: "mustNotContain",
-        Cell: (row) => {
-          const items = row.value;
-          if (!items) {
+        header: "Must not contain",
+        accessorKey: "mustNotContain",
+        cell: ({
+          row: {
+            original: { mustNotContain },
+          },
+        }) => {
+          if (!mustNotContain) {
             return null;
           }
           return (
             <>
-              {items.map((v, idx) => {
+              {mustNotContain.map((v, idx) => {
                 return (
                   <Badge key={BuildKey(idx, v)} color="gray">
                     {v}
@@ -124,14 +138,15 @@ const Table: FunctionComponent = () => {
         },
       },
       {
-        accessor: "profileId",
-        Cell: ({ row }) => {
+        id: "profileId",
+        cell: ({ row }) => {
           const profile = row.original;
           return (
-            <Group spacing="xs" noWrap>
+            <Group gap="xs" wrap="nowrap">
               <Action
                 label="Edit Profile"
                 icon={faWrench}
+                c="gray"
                 onClick={() => {
                   modals.openContextModal(ProfileEditModal, {
                     languages,
@@ -143,7 +158,7 @@ const Table: FunctionComponent = () => {
               <Action
                 label="Remove"
                 icon={faTrash}
-                color="red"
+                c="red"
                 onClick={() => action.remove(row.index)}
               ></Action>
             </Group>
@@ -159,15 +174,15 @@ const Table: FunctionComponent = () => {
 
   return (
     <>
-      <SimpleTable columns={columns} data={profiles}></SimpleTable>
+      <SimpleTable columns={columns} data={[...profiles]}></SimpleTable>
       <Button
         fullWidth
         disabled={!canAdd}
-        color="light"
         onClick={() => {
           const profile = {
             profileId: nextProfileId,
             name: "",
+            tag: undefined,
             items: [],
             cutoff: null,
             mustContain: [],