update

src/Blocks/DataTable/variations/DefaultTable.jsx

@@ -3,6 +3,7 @@ import { capitalize } from 'lodash';
 import { Icon } from '@plone/volto/components';
 import { Menu, Loader } from 'semantic-ui-react';
 
+import { defaultColDef } from '@eeacms/volto-block-data-table/config';
 import Table from '@eeacms/volto-block-data-table/Table';
 
 import leftSVG from '@plone/volto/icons/left-key.svg';
@@ -33,6 +34,7 @@ const DefaultView = (props) => {
         rows={rows}
         fields={fields}
         columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
         withHeaders={withHeaders}
         TableProps={TableProps}
       />

src/CellRenderers/CellRenderer.jsx

@@ -39,7 +39,7 @@ const CellRenderer = (props) => {
   const TableCell = tableCell ? Table.Cell : Fragment;
 
   return (
-    <TableCell>
+    <TableCell style={{ minWidth: colDef.minWidth }}>
       <CellRenderer {...props} value={value} />
     </TableCell>
   );

src/Table.jsx

@@ -10,23 +10,27 @@ const ColumnHeader = components.columnHeader;
 const CellRenderer = components.cellRenderer;
 
 export default (props) => {
-  const { rows, columnDefs, withHeaders, TableProps } = props;
+  const { rows, columnDefs, defaultColDef, withHeaders, TableProps } = props;
   const { celled, striped, borderless, compacted } = TableProps || {};
 
   return (
     <Table
-      className={cx('data-table', {
+      className={cx('data-table unstackable', {
         borderless,
         compacted,
       })}
       celled={celled}
       striped={striped}
+      stackable={false}
     >
       {withHeaders && (
         <Table.Header>
           <Table.Row>
             {columnDefs.map((colDef) => (
-              <ColumnHeader key={colDef.field} colDef={colDef} />
+              <ColumnHeader
+                key={colDef.field}
+                colDef={{ ...defaultColDef, ...colDef }}
+              />
             ))}
           </Table.Row>
         </Table.Header>
@@ -35,7 +39,11 @@ export default (props) => {
         {rows.map((row) => (
           <Table.Row key={row.id}>
             {columnDefs.map((colDef) => (
-              <CellRenderer key={colDef.field} colDef={colDef} row={row} />
+              <CellRenderer
+                key={colDef.field}
+                colDef={{ ...defaultColDef, ...colDef }}
+                row={row}
+              />
             ))}
           </Table.Row>
         ))}

src/config.jsx

@@ -38,3 +38,7 @@ export const renderers = {
     skeleton: 'skeletonCellRenderer',
   },
 };
+
+export const defaultColDef = {
+  minWidth: 100,
+};

src/table.less

@@ -29,6 +29,8 @@
 }
 
 .data-table-block {
+  overflow-x: auto;
+
   .ui.menu.pagination {
     display: flex;
     justify-content: center;