1 files changed, 48 insertions, 16 deletions

diff --git a/frontend/src/pages/Movies/Editor.tsx b/frontend/src/pages/Movies/Editor.tsx
index a196f9deb..1ec84a52c 100644
--- a/frontend/src/pages/Movies/Editor.tsx
+++ b/frontend/src/pages/Movies/Editor.tsx
@@ -1,42 +1,74 @@
+import { FunctionComponent, useMemo } from "react";
+import { Checkbox } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { ColumnDef } from "@tanstack/react-table";
 import { useMovieModification, useMovies } from "@/apis/hooks";
 import { QueryOverlay } from "@/components/async";
 import { AudioList } from "@/components/bazarr";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import MassEditor from "@/pages/views/MassEditor";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
 
 const MovieMassEditor: FunctionComponent = () => {
   const query = useMovies();
   const mutation = useMovieModification();
 
-  const columns = useMemo<Column<Item.Movie>[]>(
+  useDocumentTitle("Movies - Bazarr (Mass Editor)");
+
+  const columns = useMemo<ColumnDef<Item.Movie>[]>(
     () => [
       {
-        Header: "Name",
-        accessor: "title",
+        id: "selection",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              id="table-header-selection"
+              indeterminate={table.getIsSomeRowsSelected()}
+              checked={table.getIsAllRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            ></Checkbox>
+          );
+        },
+        cell: ({ row: { index, getIsSelected, getToggleSelectedHandler } }) => {
+          return (
+            <Checkbox
+              id={`table-cell-${index}`}
+              checked={getIsSelected()}
+              onChange={getToggleSelectedHandler()}
+              onClick={getToggleSelectedHandler()}
+            ></Checkbox>
+          );
+        },
+      },
+      {
+        header: "Name",
+        accessorKey: "title",
       },
       {
-        Header: "Audio",
-        accessor: "audio_language",
-        Cell: ({ value }) => {
-          return <AudioList audios={value}></AudioList>;
+        header: "Audio",
+        accessorKey: "audio_language",
+        cell: ({
+          row: {
+            original: { audio_language: audioLanguage },
+          },
+        }) => {
+          return <AudioList audios={audioLanguage}></AudioList>;
         },
       },
       {
-        Header: "Languages Profile",
-        accessor: "profileId",
-        Cell: ({ value }) => {
-          return <LanguageProfileName index={value}></LanguageProfileName>;
+        header: "Languages Profile",
+        accessorKey: "profileId",
+        cell: ({
+          row: {
+            original: { profileId },
+          },
+        }) => {
+          return <LanguageProfileName index={profileId}></LanguageProfileName>;
         },
       },
     ],
     [],
   );
 
-  useDocumentTitle("Movies - Bazarr (Mass Editor)");
-
   return (
     <QueryOverlay result={query}>
       <MassEditor