Table selection updates on data change

app/react/App/styles/globals.css

@@ -2362,6 +2362,11 @@ input:checked + .toggle-bg {
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
 .bg-primary-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));

app/react/V2/Components/UI/Table.tsx

@@ -49,11 +49,14 @@ const Table = <T,>({
     [columns, enableSelection]
   );
 
-  const memoizedData = useMemo<T[]>(() => data, [data]);
+  const preparedData = useMemo<T[]>(() => {
+    setRowSelection({});
+    return data;
+  }, [data]);
 
   const table = useReactTable({
     columns: memoizedColumns,
-    data: memoizedData,
+    data: preparedData,
     initialState,
     state: {
       sorting,
@@ -75,7 +78,7 @@ const Table = <T,>({
   }, [onSelection, rowSelection, table]);
 
   return (
-    <div className="relative overflow-x-auto">
+    <div className="overflow-x-auto relative">
       <table className="w-full text-sm text-left">
         {title && (
           <caption className="p-5 text-lg font-semibold text-left text-gray-900 bg-white">

app/react/V2/Components/UI/specs/Table.cy.tsx

@@ -82,5 +82,33 @@ describe('Table', () => {
       cy.contains('p', 'Selected items for Table B: 2');
       cy.contains('p', 'Selections of Table B: Entity 2, Entity 3,');
     });
+
+    it('should clear selected items when data changes', () => {
+      mount(<WithCheckboxes />);
+
+      cy.get('table').eq(0).get('thead > tr > th').eq(0).click();
+
+      cy.get('tbody')
+        .eq(1)
+        .within(() => {
+          cy.get('input[type="checkbox"]').eq(0).check();
+          cy.get('input[type="checkbox"]').eq(2).check();
+        });
+
+      cy.contains('button', 'Update table data').click();
+
+      cy.contains('p', 'Selections of Table A: Entity 2, Entity 1, Entity 3,');
+      cy.contains('p', 'Selections of Table B: Entity 2, Entity 3,').should('not.exist');
+    });
+
+    it('should not clear selections if data is not changed', () => {
+      mount(<WithCheckboxes />);
+      cy.get('table')
+        .eq(1)
+        .within(() => cy.get('thead > tr > th').eq(0).click());
+
+      cy.contains('button', 'Reset table data').click();
+      cy.contains('p', 'Selections of Table B: Entity 2, Entity 1, Entity 3,');
+    });
   });
 });

app/react/stories/Table.stories.tsx

@@ -41,9 +41,19 @@ const ActionsCell = () => (
   </div>
 );
 
+const updatedData = [
+  { title: 'Entity 2', created: 2, description: 'Short text' },
+  {
+    title: 'Entity 3',
+    created: 3,
+    description: 'Morbi congue et justo vitae congue. Vivamus porttitor et leo vitae efficitur',
+  },
+];
+
 const CheckboxesTableComponent = (args: TableProps<SampleSchema>) => {
   const [selected1, setSelected1] = useState<Row<SampleSchema>[]>([]);
   const [selected2, setSelected2] = useState<Row<SampleSchema>[]>([]);
+  const [table2Data, setTable2Data] = useState(args.data);
 
   return (
     <div className="tw-content">
@@ -64,7 +74,7 @@ const CheckboxesTableComponent = (args: TableProps<SampleSchema>) => {
 
       <Table<SampleSchema>
         columns={args.columns}
-        data={args.data}
+        data={table2Data}
         title="Table B"
         enableSelection
         onSelection={setSelected2}
@@ -74,6 +84,24 @@ const CheckboxesTableComponent = (args: TableProps<SampleSchema>) => {
       <p className="m-1">
         Selections of Table B: {selected2.map(sel => `${sel.original.title}, `)}
       </p>
+
+      <div className="flex gap-1">
+        <button
+          type="button"
+          className="p-2 text-white rounded border bg-primary-500"
+          onClick={() => setTable2Data(updatedData)}
+        >
+          Update table data
+        </button>
+
+        <button
+          type="button"
+          className="p-2 text-white rounded border bg-primary-500"
+          onClick={() => setTable2Data(args.data)}
+        >
+          Reset table data
+        </button>
+      </div>
     </div>
   );
 };