Roll back table variations -> add responsive toggle instead

src/blocks/Table/TableBlockView.jsx

@@ -3,9 +3,11 @@
  * @module volto-slate/blocks/Table/View
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import { map } from 'lodash';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { withBlockExtensions } from '@plone/volto/helpers';
+import { Table } from 'semantic-ui-react';
 import {
   serializeNodes,
   serializeNodesToText,
@@ -23,6 +25,10 @@ import '../../editor/plugins/Table/less/public.less';
  */
 const View = (props) => {
   const { data } = props;
+  const [state, setState] = useState({
+    column: null,
+    direction: null,
+  });
 
   const headers = useMemo(() => {
     return data.table.rows?.[0]?.cells;
@@ -52,11 +58,91 @@ const View = (props) => {
     return items;
   }, [data.table.rows]);
 
-  const Table = props.variation.view;
+  const sortedRows = useMemo(() => {
+    if (state.column === null) return Object.keys(rows);
+    return Object.keys(rows).sort((a, b) => {
+      const a_text = rows[a][state.column].valueText;
+      const b_text = rows[b][state.column].valueText;
+      if (state.direction === 'ascending' ? a_text < b_text : a_text > b_text) {
+        return -1;
+      }
+      if (state.direction === 'ascending' ? a_text > b_text : a_text < b_text) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [state, rows]);
 
   return (
     <>
-      {data && data.table && <Table {...props} headers={headers} rows={rows} />}
+      {data && data.table && (
+        <Table
+          fixed={data.table.fixed}
+          compact={data.table.compact}
+          basic={data.table.basic ? 'very' : false}
+          celled={data.table.celled}
+          inverted={data.table.inverted}
+          striped={data.table.striped}
+          sortable={data.table.sortable}
+          className={cx('slate-table-block', {
+            responsive: data.table.responsive,
+          })}
+        >
+          {!data.table.hideHeaders ? (
+            <Table.Header>
+              <Table.Row>
+                {headers.map((cell, index) => (
+                  <Table.HeaderCell
+                    key={cell.key}
+                    textAlign="center"
+                    verticalAlign="middle"
+                    sorted={state.column === index ? state.direction : null}
+                    onClick={() => {
+                      if (!data.table.sortable) return;
+                      setState({
+                        column: index,
+                        direction:
+                          state.column !== index
+                            ? 'ascending'
+                            : state.direction === 'ascending'
+                            ? 'descending'
+                            : 'ascending',
+                      });
+                    }}
+                  >
+                    {cell.value &&
+                    Node.string({ children: cell.value }).length > 0
+                      ? serializeNodes(cell.value)
+                      : '\u00A0'}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : (
+            ''
+          )}
+          <Table.Body>
+            {map(sortedRows, (row) => (
+              <Table.Row key={row}>
+                {map(rows[row], (cell, cellIndex) => (
+                  <Table.Cell
+                    key={cell.key}
+                    data-label={
+                      data.table.responsive
+                        ? serializeNodesToText(headers[cellIndex].value)
+                        : undefined
+                    }
+                    textAlign={data.table.textAlign || 'center'}
+                    verticalAlign={data.table.verticalAlign || 'middle'}
+                  >
+                    {cell.value}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
     </>
   );
 };
@@ -70,4 +156,4 @@ View.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default withBlockExtensions(View);
+export default View;

src/blocks/Table/index.js

@@ -3,7 +3,6 @@ import TableBlockEdit from './TableBlockEdit';
 import TableBlockView from './TableBlockView';
 import { extractTables } from './deconstruct';
 import { normalizeTable } from './extensions/normalizeTable';
-import TableVariations from './variations';
 
 /**
  * @summary Called from Volto to configure new or existing Volto block types.
@@ -39,7 +38,6 @@ export default function install(config) {
     mostUsed: false,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
-    variations: TableVariations,
     security: {
       addPermission: [],
       view: [],

src/blocks/Table/schema.js

@@ -5,6 +5,10 @@ const messages = defineMessages({
     id: 'Hide headers',
     defaultMessage: 'Hide headers',
   },
+  responsive: {
+    id: 'Responsive',
+    defaultMessage: 'Responsive',
+  },
   sortable: {
     id: 'Make the table sortable',
     defaultMessage: 'Make the table sortable',
@@ -83,6 +87,7 @@ export default (props) => {
         fields: [
           'hideHeaders',
           'sortable',
+          'responsive',
           'fixed',
           'celled',
           'striped',
@@ -104,6 +109,10 @@ export default (props) => {
         description: 'Visible only in view mode',
         type: 'boolean',
       },
+      responsive: {
+        title: intl.formatMessage(messages.responsive),
+        type: 'boolean',
+      },
       fixed: {
         title: intl.formatMessage(messages.fixed),
         type: 'boolean',