Merge pull request #72 from twentyhq/cbo-horizontal-scroll

Add horizontal scroll on tables

front/src/components/table/Table.tsx

@@ -21,7 +21,8 @@ type OwnProps<TData> = {
 };
 
 const StyledTable = styled.table`
-  min-width: calc(100% - ${(props) => props.theme.spacing(4)});
+  min-width: 1000px;
+  width: calc(100% - ${(props) => props.theme.spacing(4)});
   border-radius: 4px;
   border-spacing: 0;
   border-collapse: collapse;
@@ -61,6 +62,13 @@ const StyledTableWithHeader = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
+  width: 100%;
+`;
+
+const StyledTableScrollableContainer = styled.div`
+  overflow: auto;
+  height: 100%;
+  flex: 1;
 `;
 
 function Table<TData>({
@@ -85,6 +93,7 @@ function Table<TData>({
         onSortsUpdate={onSortsUpdate}
         sortsAvailable={sortsAvailable || []}
       />
+      <StyledTableScrollableContainer>
         <StyledTable>
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -108,7 +117,10 @@ function Table<TData>({
                 {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                     </td>
                   );
                 })}
@@ -118,7 +130,8 @@ function Table<TData>({
           {table
             .getFooterGroups()
             .flatMap((group) => group.headers)
-          .filter((header) => !!header.column.columnDef.footer).length > 0 && (
+            .filter((header) => !!header.column.columnDef.footer).length >
+            0 && (
             <tfoot>
               {table.getFooterGroups().map((footerGroup) => (
                 <tr key={footerGroup.id}>
@@ -137,6 +150,7 @@ function Table<TData>({
             </tfoot>
           )}
         </StyledTable>
+      </StyledTableScrollableContainer>
     </StyledTableWithHeader>
   );
 }

front/src/layout/AppLayout.tsx

@@ -16,6 +16,7 @@ const StyledRightContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex: 1;
+  overflow: hidden;
 `;
 
 type OwnProps = {

front/src/layout/containers/WithTopBarContainer.tsx

@@ -12,6 +12,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  overflow: hidden;
 `;
 
 const ContentContainer = styled.div`
@@ -21,6 +22,7 @@ const ContentContainer = styled.div`
   flex: 1;
   padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
 `;
 
 const ContentSubContainer = styled.div`