diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx index c7e7c94c6..2a8fc619e 100644 --- a/frontend/src/components/ConsumerGroups/List.tsx +++ b/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(); @@ -47,6 +48,7 @@ const List = () => { to={encodeURIComponent(`${getValue()}`)} /> ), + size: 600, }, { id: ConsumerGroupOrdering.MEMBERS, @@ -96,6 +98,8 @@ const List = () => { [] ); + const columnSizingPersister = useLocalStoragePersister('Consumers'); + return ( <> @@ -118,6 +122,8 @@ const List = () => { clusterConsumerGroupDetailsPath(clusterName, original.groupId) ) } + enableColumnResizing + columnSizingPersister={columnSizingPersister} disabled={consumerGroups.isFetching} /> diff --git a/frontend/src/components/Topics/List/TopicTable.tsx b/frontend/src/components/Topics/List/TopicTable.tsx index 5bd5b565c..1c80a1e4f 100644 --- a/frontend/src/components/Topics/List/TopicTable.tsx +++ b/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, }, { header: 'Number of messages', @@ -103,6 +106,8 @@ const TopicTable: React.FC = () => { [] ); + const columnSizingPersister = useLocalStoragePersister('Topics'); + return ( { enableRowSelection={ !isReadOnly ? (row) => !row.original.internal : undefined } + enableColumnResizing + columnSizingPersister={columnSizingPersister} emptyMessage="No topics found" /> );