Use RAC table instead

frontend/packages/volto-ploneconf/package.json

@@ -42,7 +42,6 @@
     "@eeacms/volto-matomo"
   ],
   "dependencies": {
-    "@plone/components": "workspace:*",
     "@eeacms/volto-accordion-block": "11.0.0",
     "@eeacms/volto-matomo": "^5.0.0",
     "@eeacms/volto-statistic-block": "4.1.0",
@@ -54,19 +53,21 @@
     "@mbarde/volto-image-crop-widget": "0.5.1",
     "@plone-collective/volto-authomatic": "2.0.1",
     "@plone-collective/volto-eventbrite-block": "^1.0.0-alpha.2",
+    "@plone/components": "workspace:*",
     "@plonegovbr/volto-network-block": "^1.0.0",
     "classnames": "2.2.6",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react-lazy-load-image-component": "^1.6.2",
+    "react-stately": "^3.33.0",
     "volto-form-block": "^3.9.1",
     "volto-subblocks": "^2.1.0"
   },
   "peerDependencies": {
     "react": "18.2.0",
+    "react-aria-components": "^1.4.1",
     "react-dom": "18.2.0",
     "react-intl": "^3.12.1",
-    "react-aria-components": "^1.4.1",
     "semantic-ui-react": "^2.1.5"
   },
   "devDependencies": {

frontend/packages/volto-ploneconf/src/components/Registrations/RegistrationsManagement.jsx

@@ -1,13 +1,14 @@
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
+import cloneDeep from 'lodash/cloneDeep';
 import React, { useEffect, useState } from 'react';
 import { Container } from '@plone/components';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import {
-  Table,
-  TableBody,
-  TableHeader,
+  Table as SemanticTable,
+  TableBody as SemanticTableBody,
+  TableHeader as SemanticTableHeader,
   TableRow,
   TableHeaderCell,
   Segment,
@@ -17,12 +18,26 @@ import { Helmet } from '@plone/volto/helpers';
 import backSVG from '@plone/volto/icons/back.svg';
 import { Icon, Toolbar, UniversalLink } from '@plone/volto/components';
 
+import {
+  Cell,
+  Column,
+  ColumnResizer,
+  ResizableTableContainer,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+} from 'react-aria-components';
+
 import {
   getAllRegistrations,
   getRegistrations,
 } from '../../actions/registrations/registrations';
 
 import RegistrationItem from './RegistrationItem';
+import { useListData, useAsyncList } from 'react-stately';
+
+import '@plone/components/src/styles/basic/Table.css';
 
 const messages = defineMessages({
   back: {
@@ -80,7 +95,7 @@ const sortReducer = (state, action) => {
 
       return {
         column: action.column,
-        data: _.sortBy(state.data, [action.column]),
+        data: sortBy(state.data, [action.column]),
         direction: 'ascending',
       };
     default:
@@ -129,6 +144,46 @@ const RegistrationsManagement = () => {
     ? intl.formatMessage(messages.registrationManagementAll)
     : intl.formatMessage(messages.registrationManagement);
 
+  let list = useAsyncList({
+    async load({ signal }) {
+      // let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
+      //   signal,
+      // });
+      // let json = await res.json();
+      const func =
+        portal_type === 'Training' ? getRegistrations : getAllRegistrations;
+
+      let registrations = await dispatch(func(pathname, uuid));
+      const result = cloneDeep(registrations.registrations.items);
+      result.forEach((registration) => {
+        registration.training = registration.training.title;
+      });
+      return {
+        items: result,
+      };
+    },
+    // async getKey(item) {
+    //   debugger;
+    //   return item.uid;
+    // },
+    async sort({ items, sortDescriptor }) {
+      console.log(items);
+      console.log(sortDescriptor.column);
+      return {
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column];
+          let second = b[sortDescriptor.column];
+          let cmp =
+            (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+          if (sortDescriptor.direction === 'descending') {
+            cmp *= -1;
+          }
+          return cmp;
+        }),
+      };
+    },
+  });
+
   return (
     <>
       <Helmet title={pageTitle} />
@@ -148,8 +203,38 @@ const RegistrationsManagement = () => {
             />
           </Segment>
           <Segment secondary>{pageTitle}</Segment>
-          <Table className={'sortable'}>
+          <Table
+            aria-label="Example table with client side sorting"
+            sortDescriptor={list.sortDescriptor}
+            onSortChange={list.sort}
+          >
             <TableHeader>
+              <Column id="training" isRowHeader allowsSorting>
+                Training
+              </Column>
+              <Column id="user_id" allowsSorting>
+                Name
+              </Column>
+              <Column id="created" allowsSorting>
+                Date
+              </Column>
+              <Column id="state" allowsSorting>
+                State
+              </Column>
+            </TableHeader>
+            <TableBody items={list.items}>
+              {(item) => (
+                <Row id={item.uid}>
+                  <Cell>{item.training}</Cell>
+                  <Cell>{item.user_id}</Cell>
+                  <Cell>{item.created}</Cell>
+                  <Cell>{item.state}</Cell>
+                </Row>
+              )}
+            </TableBody>
+          </Table>
+          <SemanticTable className={'sortable'}>
+            <SemanticTableHeader>
               <TableRow>
                 {allTrainings && (
                   <TableHeaderCell
@@ -189,8 +274,8 @@ const RegistrationsManagement = () => {
                   </TableHeaderCell>
                 )}
               </TableRow>
-            </TableHeader>
-            <TableBody>
+            </SemanticTableHeader>
+            <SemanticTableBody>
               {isClient && (
                 <RegistrationsList
                   intl={intl}
@@ -200,8 +285,8 @@ const RegistrationsManagement = () => {
                   allTrainings={allTrainings}
                 />
               )}
-            </TableBody>
-          </Table>
+            </SemanticTableBody>
+          </SemanticTable>
         </Segment.Group>
         {isClient &&
           createPortal(