feat: projects actions bar.

src/containers/Projects/containers/ProjectsActionsBar.tsx

@@ -41,6 +41,9 @@ function ProjectsActionsBar({
   // #withProjectsActions
   setProjectsTableState,
 
+  // #withSettings
+  projectsTableSize,
+
   // #withSettingsActions
   addSetting,
 }) {
@@ -100,7 +103,7 @@ function ProjectsActionsBar({
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
-          initialValue={'medium'}
+          initialValue={projectsTableSize}
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
@@ -123,4 +126,7 @@ export default compose(
   withProjects(({ projectsTableState }) => ({
     projectsFilterRoles: projectsTableState?.filterRoles,
   })),
+  withSettings(({ projectSettings }) => ({
+    projectsTableSize: projectSettings?.tableSize,
+  })),
 )(ProjectsActionsBar);

src/containers/Projects/containers/ProjectsDataTable.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 
 import { DataTable } from 'components';
+import { TABLES } from 'common/tables';
 
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import { useProjectsListContext } from './ProjectsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
 import { useProjectsListColumns, ActionsMenu } from '../components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withProjectsActions from './withProjectsActions';
+import withSettings from '../../Settings/withSettings';
 
 import { compose } from 'utils';
 
@@ -19,6 +23,18 @@ const projects = [
     description: 'Project 1 description',
     status: 'Active',
   },
+  {
+    id: 2,
+    name: 'Project 2',
+    description: 'Project 2 description',
+    status: 'Active',
+  },
+  {
+    id: 3,
+    name: 'Project 3',
+    description: 'Project 3 description',
+    status: 'Active',
+  },
 ];
 
 /**
@@ -28,6 +44,9 @@ const projects = [
 function ProjectsDataTable({
   // #withDial
   openDialog,
+
+  // #withSettings
+  projectsTableSize,
 }) {
   // Retrieve projects table columns.
   const columns = useProjectsListColumns();
@@ -40,6 +59,10 @@ function ProjectsDataTable({
     openDialog('task-form');
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PROJECTS);
+
   return (
     <DataTable
       columns={columns}
@@ -55,6 +78,9 @@ function ProjectsDataTable({
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={projectsTableSize}
       payload={{
         onNewTask: handleNewTaskButtonClick,
       }}
@@ -62,4 +88,10 @@ function ProjectsDataTable({
   );
 }
 
-export default compose(withDialogActions)(ProjectsDataTable);
+export default compose(
+  withDialogActions,
+  withProjectsActions,
+  withSettings(({ projectSettings }) => ({
+    projectsTableSize: projectSettings?.tableSize,
+  })),
+)(ProjectsDataTable);