FE: Manual column width for Consumers and Topics tables (#1273)

Co-authored-by: German Osin <[email protected]>

Author: Vixtir

frontend/src/components/ConsumerGroups/List.tsx

@@ -16,6 +16,7 @@ import { CONSUMER_GROUP_STATE_TOOLTIPS, PER_PAGE } from 'lib/constants';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -47,6 +48,7 @@ const List = () => {
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />
         ),
+        size: 600,
       },
       {
         id: ConsumerGroupOrdering.MEMBERS,
@@ -96,6 +98,8 @@ const List = () => {
     []
   );
 
+  const columnSizingPersister = useLocalStoragePersister('Consumers');
+
   return (
     <>
       <ResourcePageHeading text="Consumers" />
@@ -118,6 +122,8 @@ const List = () => {
             clusterConsumerGroupDetailsPath(clusterName, original.groupId)
           )
         }
+        enableColumnResizing
+        columnSizingPersister={columnSizingPersister}
         disabled={consumerGroups.isFetching}
       />
     </>

frontend/src/components/Topics/List/TopicTable.tsx

@@ -8,6 +8,7 @@ import { useSearchParams } from 'react-router-dom';
 import ClusterContext from 'components/contexts/ClusterContext';
 import { useTopics } from 'lib/hooks/api/topics';
 import { PER_PAGE } from 'lib/constants';
+import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 
 import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
@@ -39,6 +40,7 @@ const TopicTable: React.FC = () => {
         header: 'Topic Name',
         accessorKey: 'name',
         cell: TopicTitleCell,
+        size: 400,
         meta: {
           width: '100%',
         },
@@ -70,6 +72,7 @@ const TopicTable: React.FC = () => {
         accessorKey: 'replicationFactor',
         enableSorting: false,
         size: 148,
+        maxSize: 148,
       },
       {
         id: TopicColumnsToSort.MESSAGES_COUNT,
@@ -97,6 +100,8 @@ const TopicTable: React.FC = () => {
     []
   );
 
+  const columnSizingPersister = useLocalStoragePersister('Topics');
+
   return (
     <Table
       data={topics}
@@ -108,6 +113,8 @@ const TopicTable: React.FC = () => {
       enableRowSelection={
         !isReadOnly ? (row) => !row.original.internal : undefined
       }
+      enableColumnResizing
+      columnSizingPersister={columnSizingPersister}
       emptyMessage="No topics found"
     />
   );