From 66ee1aa07f27aabf90629920167798b64568134a Mon Sep 17 00:00:00 2001 From: Alex Freska Date: Mon, 16 Dec 2024 13:19:08 -0500 Subject: [PATCH] refactor: visible columns --- .changeset/cyan-lamps-hang.md | 5 + .changeset/silly-zebras-collect.md | 5 + .../Contracts/ContractsViewDropdownMenu.tsx | 14 +-- apps/hostd/components/Contracts/index.tsx | 4 +- .../Volumes/VolumesViewDropdownMenu.tsx | 10 +- apps/hostd/components/Volumes/index.tsx | 4 +- apps/hostd/components/Wallet/index.tsx | 4 +- apps/hostd/contexts/contracts/index.tsx | 16 +--- apps/hostd/contexts/transactions/index.tsx | 16 +--- apps/hostd/contexts/volumes/index.tsx | 18 ++-- .../Alerts/AlertsViewDropdownMenu.tsx | 6 +- apps/renterd/components/Alerts/index.tsx | 4 +- .../Contracts/ContractsViewDropdownMenu.tsx | 14 +-- apps/renterd/components/Contracts/index.tsx | 4 +- .../Files/FilesViewDropdownMenu.tsx | 4 +- .../FilesDirectory/FilesExplorer.tsx | 4 +- .../components/FilesFlat/FilesExplorer.tsx | 5 +- .../Hosts/HostsViewDropdownMenu.tsx | 18 ++-- apps/renterd/components/Hosts/index.tsx | 4 +- .../components/Keys/KeysViewDropdownMenu.tsx | 6 +- apps/renterd/components/Keys/index.tsx | 4 +- .../components/Uploads/UploadsTable.tsx | 4 +- .../Uploads/UploadsViewDropdownMenu.tsx | 4 +- apps/renterd/components/Wallet/index.tsx | 4 +- apps/renterd/contexts/alerts/index.tsx | 13 +-- apps/renterd/contexts/contracts/index.tsx | 15 +-- .../renterd/contexts/filesDirectory/index.tsx | 13 +-- apps/renterd/contexts/filesFlat/index.tsx | 13 +-- apps/renterd/contexts/filesManager/index.tsx | 6 +- apps/renterd/contexts/hosts/index.tsx | 15 +-- apps/renterd/contexts/keys/index.tsx | 15 +-- apps/renterd/contexts/transactions/index.tsx | 16 +--- apps/renterd/contexts/uploads/index.tsx | 15 +-- .../Wallet/EventsViewDropdownMenu.tsx | 6 +- apps/walletd/components/Wallet/index.tsx | 4 +- .../AddressesViewDropdownMenu.tsx | 6 +- .../components/WalletAddresses/index.tsx | 4 +- .../WalletsList/WalletsViewDropdownMenu.tsx | 6 +- apps/walletd/components/WalletsList/index.tsx | 4 +- apps/walletd/contexts/addresses/index.tsx | 17 +--- apps/walletd/contexts/events/index.tsx | 15 +-- apps/walletd/contexts/wallets/index.tsx | 15 +-- libs/design-system/src/hooks/useSorting.ts | 11 ++- libs/design-system/src/hooks/useTableState.ts | 92 ++++++++----------- 44 files changed, 192 insertions(+), 290 deletions(-) create mode 100644 .changeset/cyan-lamps-hang.md create mode 100644 .changeset/silly-zebras-collect.md diff --git a/.changeset/cyan-lamps-hang.md b/.changeset/cyan-lamps-hang.md new file mode 100644 index 000000000..362678534 --- /dev/null +++ b/.changeset/cyan-lamps-hang.md @@ -0,0 +1,5 @@ +--- +'@siafoundation/design-system': minor +--- + +useTableState now handles column filtering. diff --git a/.changeset/silly-zebras-collect.md b/.changeset/silly-zebras-collect.md new file mode 100644 index 000000000..8e963268a --- /dev/null +++ b/.changeset/silly-zebras-collect.md @@ -0,0 +1,5 @@ +--- +'@siafoundation/design-system': minor +--- + +Renamed enabledColumns to visibleColumns and removed disabled categories from useTableState. diff --git a/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx b/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx index d05c77a5f..5e6973f45 100644 --- a/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx +++ b/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx @@ -30,7 +30,7 @@ export function ContractsViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useContracts() const generalColumns = configurableColumns @@ -128,42 +128,42 @@ export function ContractsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/hostd/components/Contracts/index.tsx b/apps/hostd/components/Contracts/index.tsx index 5c331603f..0ba7c206f 100644 --- a/apps/hostd/components/Contracts/index.tsx +++ b/apps/hostd/components/Contracts/index.tsx @@ -6,7 +6,7 @@ import { StateError } from './StateError' export function Contracts() { const { - columns, + visibleColumns, datasetPage, sortField, sortDirection, @@ -33,7 +33,7 @@ export function Contracts() { } pageSize={limit} data={datasetPage} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx b/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx index 6d0bc1d4d..1f0ee649f 100644 --- a/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx +++ b/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx @@ -21,7 +21,7 @@ export function VolumesViewDropdownMenu() { resetDefaultColumnVisibility, setColumnsVisible, setColumnsHidden, - enabledColumns, + visibleColumnIds, } = useVolumes() const generalColumns = configurableColumns @@ -68,28 +68,28 @@ export function VolumesViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/hostd/components/Volumes/index.tsx b/apps/hostd/components/Volumes/index.tsx index 160cf61f8..8368061b8 100644 --- a/apps/hostd/components/Volumes/index.tsx +++ b/apps/hostd/components/Volumes/index.tsx @@ -3,7 +3,7 @@ import { useVolumes } from '../../contexts/volumes' import { StateNoneYet } from './StateNoneYet' export function Volumes() { - const { dataset, datasetState, isLoading, columns } = useVolumes() + const { dataset, datasetState, isLoading, visibleColumns } = useVolumes() return (
} /> } diff --git a/apps/hostd/components/Wallet/index.tsx b/apps/hostd/components/Wallet/index.tsx index 1a7391345..7593d615a 100644 --- a/apps/hostd/components/Wallet/index.tsx +++ b/apps/hostd/components/Wallet/index.tsx @@ -14,7 +14,7 @@ export function Wallet() { metrics, datasetPage, datasetState, - columns, + visibleColumns, cellContext, sortableColumns, sortDirection, @@ -45,7 +45,7 @@ export function Wallet() { pageSize={defaultPageSize} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/hostd/contexts/contracts/index.tsx b/apps/hostd/contexts/contracts/index.tsx index 071de9d94..d46503abc 100644 --- a/apps/hostd/contexts/contracts/index.tsx +++ b/apps/hostd/contexts/contracts/index.tsx @@ -14,9 +14,7 @@ import { columnsDefaultVisible, ContractData, defaultSortField, - SortField, sortOptions, - TableColumnId, } from './types' import { columns } from './columns' import { useDataset } from './dataset' @@ -33,7 +31,8 @@ function useContractsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -44,7 +43,7 @@ function useContractsMain() { sortField, sortDirection, resetDefaultColumnVisibility, - } = useTableState('hostd/v0/contracts', { + } = useTableState('hostd/v0/contracts', { columns, columnsDefaultVisible, sortOptions, @@ -75,11 +74,6 @@ function useContractsMain() { response, }) - const filteredTableColumns = useMemo( - () => columns.filter((column) => enabledColumns.includes(column.id)), - [enabledColumns] - ) - const { estimatedBlockHeight, isSynced, nodeBlockHeight } = useSyncStatus() const currentHeight = isSynced ? nodeBlockHeight : estimatedBlockHeight @@ -133,10 +127,10 @@ function useContractsMain() { cellContext, datasetPageTotal: datasetPage?.length || 0, datasetFilteredTotal: response.data?.count, - columns: filteredTableColumns, + visibleColumns, datasetPage, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx index 459d61758..3c5369027 100644 --- a/apps/hostd/contexts/transactions/index.tsx +++ b/apps/hostd/contexts/transactions/index.tsx @@ -107,7 +107,8 @@ function useTransactionsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -125,14 +126,6 @@ function useTransactionsMain() { defaultSortField, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const siascanUrl = useSiascanUrl() const cellContext = useMemo( () => ({ @@ -190,7 +183,7 @@ function useTransactionsMain() { defaultPageSize, cellContext, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -206,8 +199,7 @@ function useTransactionsMain() { removeFilter, removeLastFilter, resetFilters, - filteredTableColumns, - columns, + visibleColumns, } } diff --git a/apps/hostd/contexts/volumes/index.tsx b/apps/hostd/contexts/volumes/index.tsx index 07a61e649..b9bfd3f23 100644 --- a/apps/hostd/contexts/volumes/index.tsx +++ b/apps/hostd/contexts/volumes/index.tsx @@ -7,8 +7,8 @@ import { } from '@siafoundation/design-system' import { VolumeMeta } from '@siafoundation/hostd-types' import { useVolumes as useVolumesData } from '@siafoundation/hostd-react' -import { createContext, useContext, useMemo } from 'react' -import { columnsDefaultVisible, TableColumnId, VolumeData } from './types' +import { createContext, useContext } from 'react' +import { columnsDefaultVisible, VolumeData } from './types' import { columns } from './columns' import { useDataset } from './dataset' import { defaultDatasetRefreshInterval } from '../../config/swr' @@ -22,7 +22,8 @@ function useVolumesMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, toggleColumnVisibility, setColumnsVisible, setColumnsHidden, @@ -32,7 +33,7 @@ function useVolumesMain() { sortField, sortDirection, resetDefaultColumnVisibility, - } = useTableState('hostd/v0/volumes', { + } = useTableState('hostd/v0/volumes', { columns, columnsDefaultVisible, }) @@ -61,11 +62,6 @@ function useVolumesMain() { limit, }) - const filteredTableColumns = useMemo( - () => columns.filter((column) => enabledColumns.includes(column.id)), - [enabledColumns] - ) - const isValidating = response.isValidating const error = response.error const datasetState = useDatasetState({ @@ -80,13 +76,13 @@ function useVolumesMain() { datasetFilteredTotal: datasetFiltered?.length || 0, datasetPageTotal: datasetPage?.length || 0, isLoading: response.isValidating, - columns: filteredTableColumns, + visibleColumns, dataset, datasetPage, offset, limit, configurableColumns, - enabledColumns, + visibleColumnIds, toggleColumnVisibility, setColumnsVisible, setColumnsHidden, diff --git a/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx b/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx index 09577829a..dcb34e974 100644 --- a/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx +++ b/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx @@ -21,7 +21,7 @@ export function AlertsViewDropdownMenu() { resetDefaultColumnVisibility, setColumnsVisible, setColumnsHidden, - enabledColumns, + visibleColumnIds, } = useAlerts() const generalColumns = configurableColumns @@ -62,14 +62,14 @@ export function AlertsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/Alerts/index.tsx b/apps/renterd/components/Alerts/index.tsx index c4f3aa853..ecaf04a8b 100644 --- a/apps/renterd/components/Alerts/index.tsx +++ b/apps/renterd/components/Alerts/index.tsx @@ -6,7 +6,7 @@ import { useAlerts } from '../../contexts/alerts' export function Alerts() { const { - columns, + visibleColumns, datasetPage, sortField, sortDirection, @@ -32,7 +32,7 @@ export function Alerts() { sortableColumns={sortableColumns} pageSize={limit} data={datasetPage} - columns={columns} + columns={visibleColumns} sortDirection={sortDirection} sortField={sortField} toggleSort={toggleSort} diff --git a/apps/renterd/components/Contracts/ContractsViewDropdownMenu.tsx b/apps/renterd/components/Contracts/ContractsViewDropdownMenu.tsx index 240d06de3..655408d26 100644 --- a/apps/renterd/components/Contracts/ContractsViewDropdownMenu.tsx +++ b/apps/renterd/components/Contracts/ContractsViewDropdownMenu.tsx @@ -30,7 +30,7 @@ export function ContractsViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useContracts() const generalColumns = configurableColumns @@ -133,42 +133,42 @@ export function ContractsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/Contracts/index.tsx b/apps/renterd/components/Contracts/index.tsx index 29d59662b..9efef89fb 100644 --- a/apps/renterd/components/Contracts/index.tsx +++ b/apps/renterd/components/Contracts/index.tsx @@ -8,7 +8,7 @@ import { ContractMetrics } from './ContractMetrics' export function Contracts() { const { - columns, + visibleColumns, datasetPage, sortField, sortDirection, @@ -76,7 +76,7 @@ export function Contracts() { sortableColumns={sortableColumns} pageSize={limit} data={datasetPage} - columns={columns} + columns={visibleColumns} sortDirection={sortDirection} sortField={sortField} toggleSort={toggleSort} diff --git a/apps/renterd/components/Files/FilesViewDropdownMenu.tsx b/apps/renterd/components/Files/FilesViewDropdownMenu.tsx index 5ab6b36f0..2dc1d010f 100644 --- a/apps/renterd/components/Files/FilesViewDropdownMenu.tsx +++ b/apps/renterd/components/Files/FilesViewDropdownMenu.tsx @@ -23,7 +23,7 @@ export function FilesViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useFilesManager() return ( toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx index e159d97e1..19eb0fbfe 100644 --- a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx +++ b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx @@ -3,7 +3,6 @@ import { useFilesDirectory } from '../../contexts/filesDirectory' import { EmptyState } from './EmptyState' import { useCanUpload } from '../Files/useCanUpload' import { useFilesManager } from '../../contexts/filesManager' -import { columns } from '../../contexts/filesDirectory/columns' import { pluralize } from '@siafoundation/units' export function FilesExplorer() { @@ -14,6 +13,7 @@ export function FilesExplorer() { sortableColumns, toggleSort, isViewingBuckets, + visibleColumns, } = useFilesManager() const { datasetPage, @@ -43,7 +43,7 @@ export function FilesExplorer() { pageSize={10} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortField={sortField} sortDirection={sortDirection} diff --git a/apps/renterd/components/FilesFlat/FilesExplorer.tsx b/apps/renterd/components/FilesFlat/FilesExplorer.tsx index 0f453e32d..8cd1c23ca 100644 --- a/apps/renterd/components/FilesFlat/FilesExplorer.tsx +++ b/apps/renterd/components/FilesFlat/FilesExplorer.tsx @@ -2,10 +2,9 @@ import { Table } from '@siafoundation/design-system' import { EmptyState } from './EmptyState' import { useFilesFlat } from '../../contexts/filesFlat' import { useFilesManager } from '../../contexts/filesManager' -import { columns } from '../../contexts/filesFlat/columns' export function FilesExplorer() { - const { sortableColumns, toggleSort } = useFilesManager() + const { sortableColumns, visibleColumns, toggleSort } = useFilesManager() const { datasetPage, datasetState, cellContext, sortField, sortDirection } = useFilesFlat() return ( @@ -17,7 +16,7 @@ export function FilesExplorer() { pageSize={10} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortField={sortField} sortDirection={sortDirection} diff --git a/apps/renterd/components/Hosts/HostsViewDropdownMenu.tsx b/apps/renterd/components/Hosts/HostsViewDropdownMenu.tsx index f8025a291..d78143120 100644 --- a/apps/renterd/components/Hosts/HostsViewDropdownMenu.tsx +++ b/apps/renterd/components/Hosts/HostsViewDropdownMenu.tsx @@ -21,7 +21,7 @@ export function HostsViewDropdownMenu() { setColumnsVisible, setColumnsHidden, resetDefaultColumnVisibility, - enabledColumns, + visibleColumnIds, } = useHosts() const generalColumns = configurableColumns @@ -80,14 +80,14 @@ export function HostsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> @@ -96,14 +96,14 @@ export function HostsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> @@ -114,14 +114,14 @@ export function HostsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> @@ -132,14 +132,14 @@ export function HostsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/Hosts/index.tsx b/apps/renterd/components/Hosts/index.tsx index 1fd7e2cdb..2aa6f77f7 100644 --- a/apps/renterd/components/Hosts/index.tsx +++ b/apps/renterd/components/Hosts/index.tsx @@ -9,7 +9,7 @@ export function Hosts() { const { datasetPage, activeHost, - columns, + visibleColumns, limit, datasetState, tableContext, @@ -61,7 +61,7 @@ export function Hosts() { context={tableContext} pageSize={limit} data={datasetPage} - columns={columns} + columns={visibleColumns} rowSize="default" /> diff --git a/apps/renterd/components/Keys/KeysViewDropdownMenu.tsx b/apps/renterd/components/Keys/KeysViewDropdownMenu.tsx index 195641cf5..6f4bb103e 100644 --- a/apps/renterd/components/Keys/KeysViewDropdownMenu.tsx +++ b/apps/renterd/components/Keys/KeysViewDropdownMenu.tsx @@ -30,7 +30,7 @@ export function KeysViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useKeys() const generalColumns = configurableColumns @@ -116,14 +116,14 @@ export function KeysViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/Keys/index.tsx b/apps/renterd/components/Keys/index.tsx index 483602752..18b3dbfec 100644 --- a/apps/renterd/components/Keys/index.tsx +++ b/apps/renterd/components/Keys/index.tsx @@ -6,7 +6,7 @@ import { useKeys } from '../../contexts/keys' export function Keys() { const { - columns, + visibleColumns, datasetPage, sortField, sortDirection, @@ -34,7 +34,7 @@ export function Keys() { pageSize={limit} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortDirection={sortDirection} sortField={sortField} toggleSort={toggleSort} diff --git a/apps/renterd/components/Uploads/UploadsTable.tsx b/apps/renterd/components/Uploads/UploadsTable.tsx index 13cd0121c..e84d8b888 100644 --- a/apps/renterd/components/Uploads/UploadsTable.tsx +++ b/apps/renterd/components/Uploads/UploadsTable.tsx @@ -1,10 +1,10 @@ import { Table } from '@siafoundation/design-system' import { EmptyState } from './EmptyState' -import { columns } from '../../contexts/uploads/columns' import { useUploads } from '../../contexts/uploads' export function UploadsTable() { const { + visibleColumns, sortableColumns, toggleSort, datasetPage, @@ -19,7 +19,7 @@ export function UploadsTable() { emptyState={} pageSize={10} data={datasetPage} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortField={sortField} sortDirection={sortDirection} diff --git a/apps/renterd/components/Uploads/UploadsViewDropdownMenu.tsx b/apps/renterd/components/Uploads/UploadsViewDropdownMenu.tsx index 8d7518d1f..a39b51e97 100644 --- a/apps/renterd/components/Uploads/UploadsViewDropdownMenu.tsx +++ b/apps/renterd/components/Uploads/UploadsViewDropdownMenu.tsx @@ -14,7 +14,7 @@ export function UploadsViewDropdownMenu() { configurableColumns, toggleColumnVisibility, resetDefaultColumnVisibility, - enabledColumns, + visibleColumnIds, } = useUploads() return ( toggleColumnVisibility(value)} /> diff --git a/apps/renterd/components/Wallet/index.tsx b/apps/renterd/components/Wallet/index.tsx index dd109880c..cab191d03 100644 --- a/apps/renterd/components/Wallet/index.tsx +++ b/apps/renterd/components/Wallet/index.tsx @@ -14,7 +14,7 @@ export function Wallet() { metrics, datasetPage, datasetState, - columns, + visibleColumns, cellContext, sortableColumns, sortDirection, @@ -47,7 +47,7 @@ export function Wallet() { pageSize={defaultPageSize} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/renterd/contexts/alerts/index.tsx b/apps/renterd/contexts/alerts/index.tsx index 0e58d31e1..fdc886ced 100644 --- a/apps/renterd/contexts/alerts/index.tsx +++ b/apps/renterd/contexts/alerts/index.tsx @@ -123,7 +123,7 @@ function useAlertsMain() { const { configurableColumns, - enabledColumns, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -141,14 +141,6 @@ function useAlertsMain() { defaultSortField, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const datasetState = useDatasetState({ datasetPage, isValidating: response.isValidating, @@ -178,10 +170,9 @@ function useAlertsMain() { error: response.error, datasetPageTotal: datasetPage?.length || 0, totals, - columns: filteredTableColumns, datasetPage, configurableColumns, - enabledColumns, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/renterd/contexts/contracts/index.tsx b/apps/renterd/contexts/contracts/index.tsx index 19e309598..aea08592b 100644 --- a/apps/renterd/contexts/contracts/index.tsx +++ b/apps/renterd/contexts/contracts/index.tsx @@ -61,7 +61,8 @@ function useContractsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -94,14 +95,6 @@ function useContractsMain() { [currentHeight, _datasetPage] ) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const siascanUrl = useSiascanUrl() const filteredStats = useFilteredStats({ datasetFiltered }) @@ -180,12 +173,12 @@ function useContractsMain() { datasetTotal: dataset?.length || 0, datasetFilteredTotal: datasetFiltered?.length || 0, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, dataset, cellContext, datasetPage, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/renterd/contexts/filesDirectory/index.tsx b/apps/renterd/contexts/filesDirectory/index.tsx index 90b70f6dc..69e3b3ded 100644 --- a/apps/renterd/contexts/filesDirectory/index.tsx +++ b/apps/renterd/contexts/filesDirectory/index.tsx @@ -10,7 +10,6 @@ import { CellContext, ObjectData } from '../filesManager/types' import { useDataset } from './dataset' import { useMove } from './move' import { useFilesManager } from '../filesManager' -import { columns } from './columns' function useFilesDirectoryMain() { const { @@ -18,7 +17,7 @@ function useFilesDirectoryMain() { activeBucket, setActiveDirectory, filters, - enabledColumns, + visibleColumns, isViewingBuckets, } = useFilesManager() @@ -131,14 +130,6 @@ function useFilesDirectoryMain() { filters, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const cellContext = useMemo( () => ({ @@ -150,7 +141,7 @@ function useFilesDirectoryMain() { return { datasetState, - columns: filteredTableColumns, + visibleColumns, multiSelect, cellContext, refresh, diff --git a/apps/renterd/contexts/filesFlat/index.tsx b/apps/renterd/contexts/filesFlat/index.tsx index fa5265d87..1514366ee 100644 --- a/apps/renterd/contexts/filesFlat/index.tsx +++ b/apps/renterd/contexts/filesFlat/index.tsx @@ -8,7 +8,6 @@ import { } from 'react' import { useDataset } from './dataset' import { useFilesManager } from '../filesManager' -import { columns } from './columns' import { CellContext } from '../filesManager/types' function useFilesFlatMain() { @@ -17,7 +16,7 @@ function useFilesFlatMain() { sortDirection, sortField, filters, - enabledColumns, + visibleColumns, isViewingBuckets, } = useFilesManager() const { limit, marker, nextMarker, response, isMore, refresh, dataset } = @@ -30,14 +29,6 @@ function useFilesFlatMain() { return dataset }, [dataset]) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const multiSelect = useMultiSelect(dataset) // If the active bucket changes, clear the multi-select. @@ -86,7 +77,7 @@ function useFilesFlatMain() { refresh, limit, datasetPage, - columns: filteredTableColumns, + visibleColumns, marker, nextMarker, isMore, diff --git a/apps/renterd/contexts/filesManager/index.tsx b/apps/renterd/contexts/filesManager/index.tsx index 180690942..ad728dc08 100644 --- a/apps/renterd/contexts/filesManager/index.tsx +++ b/apps/renterd/contexts/filesManager/index.tsx @@ -27,7 +27,8 @@ import useLocalStorageState from 'use-local-storage-state' function useFilesManagerMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -229,7 +230,8 @@ function useFilesManagerMain() { downloadsList, downloadCancel, configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/renterd/contexts/hosts/index.tsx b/apps/renterd/contexts/hosts/index.tsx index 2c1c43a9c..632d054c0 100644 --- a/apps/renterd/contexts/hosts/index.tsx +++ b/apps/renterd/contexts/hosts/index.tsx @@ -37,7 +37,6 @@ import { useDataset } from './dataset' import { HostContext, HostDataWithLocation, - TableColumnId, ViewMode, columnsDefaultVisible, } from './types' @@ -142,7 +141,8 @@ function useHostsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, toggleColumnVisibility, setColumnsVisible, setColumnsHidden, @@ -152,16 +152,11 @@ function useHostsMain() { sortField, sortDirection, resetDefaultColumnVisibility, - } = useTableState('renterd/v0/hosts', { + } = useTableState('renterd/v0/hosts', { columns, columnsDefaultVisible, }) - const filteredTableColumns = useMemo( - () => columns.filter((column) => enabledColumns.includes(column.id)), - [enabledColumns] - ) - const hostsWithLocation = useMemo( () => dataset?.filter((h) => h.location) as HostDataWithLocation[], [dataset] @@ -255,11 +250,11 @@ function useHostsMain() { offset, limit, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, datasetPage, tableContext, configurableColumns, - enabledColumns, + visibleColumnIds, toggleColumnVisibility, setColumnsVisible, setColumnsHidden, diff --git a/apps/renterd/contexts/keys/index.tsx b/apps/renterd/contexts/keys/index.tsx index 07b9e3193..4fd14c277 100644 --- a/apps/renterd/contexts/keys/index.tsx +++ b/apps/renterd/contexts/keys/index.tsx @@ -52,7 +52,8 @@ function useKeysMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -96,14 +97,6 @@ function useKeysMain() { }) }, [_datasetPage, multiSelect]) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const datasetState = useDatasetState({ datasetPage, isValidating: response.isValidating, @@ -129,13 +122,13 @@ function useKeysMain() { datasetTotal: dataset?.length || 0, datasetFilteredTotal: datasetFiltered?.length || 0, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, multiSelect, cellContext, dataset, datasetPage, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/renterd/contexts/transactions/index.tsx b/apps/renterd/contexts/transactions/index.tsx index c6501593c..73d8a3fc6 100644 --- a/apps/renterd/contexts/transactions/index.tsx +++ b/apps/renterd/contexts/transactions/index.tsx @@ -102,7 +102,8 @@ function useTransactionsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -120,14 +121,6 @@ function useTransactionsMain() { defaultSortField, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const isValidating = events.isValidating || pending.isValidating const error = events.error || pending.error @@ -194,7 +187,7 @@ function useTransactionsMain() { defaultPageSize, cellContext, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -206,8 +199,7 @@ function useTransactionsMain() { sortDirection, resetDefaultColumnVisibility, filters, - filteredTableColumns, - columns, + visibleColumns, } } diff --git a/apps/renterd/contexts/uploads/index.tsx b/apps/renterd/contexts/uploads/index.tsx index ee7f2088b..d12fa9cab 100644 --- a/apps/renterd/contexts/uploads/index.tsx +++ b/apps/renterd/contexts/uploads/index.tsx @@ -118,7 +118,8 @@ function useUploadsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -136,14 +137,6 @@ function useUploadsMain() { defaultSortField, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const datasetState = useDatasetState({ datasetPage, isValidating: response.isValidating, @@ -167,10 +160,10 @@ function useUploadsMain() { isLoading: response.isLoading, error: response.error, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, datasetPage, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/walletd/components/Wallet/EventsViewDropdownMenu.tsx b/apps/walletd/components/Wallet/EventsViewDropdownMenu.tsx index e840fde17..6ce3c8963 100644 --- a/apps/walletd/components/Wallet/EventsViewDropdownMenu.tsx +++ b/apps/walletd/components/Wallet/EventsViewDropdownMenu.tsx @@ -21,7 +21,7 @@ export function EventsViewDropdownMenu() { resetDefaultColumnVisibility, setColumnsVisible, setColumnsHidden, - enabledColumns, + visibleColumnIds, } = useEvents() const generalColumns = configurableColumns @@ -67,14 +67,14 @@ export function EventsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/walletd/components/Wallet/index.tsx b/apps/walletd/components/Wallet/index.tsx index 12c1cfc52..e64d0b17f 100644 --- a/apps/walletd/components/Wallet/index.tsx +++ b/apps/walletd/components/Wallet/index.tsx @@ -8,7 +8,7 @@ export function Wallet() { const { datasetPage, datasetState, - columns, + visibleColumns, cellContext, sortableColumns, sortDirection, @@ -32,7 +32,7 @@ export function Wallet() { pageSize={6} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/walletd/components/WalletAddresses/AddressesViewDropdownMenu.tsx b/apps/walletd/components/WalletAddresses/AddressesViewDropdownMenu.tsx index 5796b9a2b..71d3bd325 100644 --- a/apps/walletd/components/WalletAddresses/AddressesViewDropdownMenu.tsx +++ b/apps/walletd/components/WalletAddresses/AddressesViewDropdownMenu.tsx @@ -30,7 +30,7 @@ export function AddressesViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useAddresses() const generalColumns = configurableColumns @@ -121,14 +121,14 @@ export function AddressesViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/walletd/components/WalletAddresses/index.tsx b/apps/walletd/components/WalletAddresses/index.tsx index b8336a049..a2064da51 100644 --- a/apps/walletd/components/WalletAddresses/index.tsx +++ b/apps/walletd/components/WalletAddresses/index.tsx @@ -8,7 +8,7 @@ export function WalletAddresses() { const { datasetPage, datasetState, - columns, + visibleColumns, cellContext, sortableColumns, sortDirection, @@ -31,7 +31,7 @@ export function WalletAddresses() { pageSize={6} data={datasetPage} context={cellContext} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/walletd/components/WalletsList/WalletsViewDropdownMenu.tsx b/apps/walletd/components/WalletsList/WalletsViewDropdownMenu.tsx index 46a32158e..607047f7f 100644 --- a/apps/walletd/components/WalletsList/WalletsViewDropdownMenu.tsx +++ b/apps/walletd/components/WalletsList/WalletsViewDropdownMenu.tsx @@ -30,7 +30,7 @@ export function WalletsViewDropdownMenu() { setSortField, sortDirection, setSortDirection, - enabledColumns, + visibleColumnIds, } = useWallets() const generalColumns = configurableColumns @@ -121,14 +121,14 @@ export function WalletsViewDropdownMenu() { c.value)} - enabled={enabledColumns} + enabled={visibleColumnIds} setColumnsVisible={setColumnsVisible} setColumnsHidden={setColumnsHidden} /> toggleColumnVisibility(value)} /> diff --git a/apps/walletd/components/WalletsList/index.tsx b/apps/walletd/components/WalletsList/index.tsx index d93bfeea6..b605f7266 100644 --- a/apps/walletd/components/WalletsList/index.tsx +++ b/apps/walletd/components/WalletsList/index.tsx @@ -9,7 +9,7 @@ export function WalletsList() { datasetPage, datasetState, context, - columns, + visibleColumns, sortableColumns, sortDirection, sortField, @@ -33,7 +33,7 @@ export function WalletsList() { pageSize={6} data={datasetPage} context={context} - columns={columns} + columns={visibleColumns} sortableColumns={sortableColumns} sortDirection={sortDirection} sortField={sortField} diff --git a/apps/walletd/contexts/addresses/index.tsx b/apps/walletd/contexts/addresses/index.tsx index d5a6aef19..fd4321924 100644 --- a/apps/walletd/contexts/addresses/index.tsx +++ b/apps/walletd/contexts/addresses/index.tsx @@ -49,7 +49,8 @@ export function useAddressesMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -72,18 +73,10 @@ export function useAddressesMain() { filters, sortField, sortDirection, - limit, offset, + limit, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const siascanUrl = useSiascanUrl() const cellContext = useMemo( () => ({ @@ -98,7 +91,7 @@ export function useAddressesMain() { datasetTotal: dataset?.length || 0, datasetFilteredTotal: datasetFiltered?.length || 0, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, dataset, datasetPage, offset, @@ -106,7 +99,7 @@ export function useAddressesMain() { cellContext, lastIndex, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/walletd/contexts/events/index.tsx b/apps/walletd/contexts/events/index.tsx index 419b5e5d1..466f83efc 100644 --- a/apps/walletd/contexts/events/index.tsx +++ b/apps/walletd/contexts/events/index.tsx @@ -121,7 +121,8 @@ export function useEventsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -139,14 +140,6 @@ export function useEventsMain() { defaultSortField, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const isValidating = responseEvents.isValidating || responseTxPool.isValidating const error = responseEvents.error || responseTxPool.error @@ -171,11 +164,11 @@ export function useEventsMain() { datasetState, error: responseEvents.error, datasetPageTotal: datasetPage?.length || 0, - columns: filteredTableColumns, + visibleColumns, datasetPage, cellContext, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/apps/walletd/contexts/wallets/index.tsx b/apps/walletd/contexts/wallets/index.tsx index a96d9b240..d7ac0a4a9 100644 --- a/apps/walletd/contexts/wallets/index.tsx +++ b/apps/walletd/contexts/wallets/index.tsx @@ -113,7 +113,8 @@ function useWalletsMain() { const { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, sortableColumns, toggleColumnVisibility, setColumnsVisible, @@ -140,14 +141,6 @@ function useWalletsMain() { limit, }) - const filteredTableColumns = useMemo( - () => - columns.filter( - (column) => column.fixed || enabledColumns.includes(column.id) - ), - [enabledColumns] - ) - const datasetState = useDatasetState({ datasetPage: datasetFiltered, isValidating: response.isValidating, @@ -170,7 +163,7 @@ function useWalletsMain() { datasetFilteredTotal: datasetFiltered?.length || 0, datasetPageTotal: datasetFiltered?.length || 0, unlockedCount: cachedMnemonicCount, - columns: filteredTableColumns, + visibleColumns, datasetPage, dataset, context, @@ -178,7 +171,7 @@ function useWalletsMain() { limit, offset, configurableColumns, - enabledColumns, + visibleColumnIds, sortableColumns, toggleColumnVisibility, setColumnsVisible, diff --git a/libs/design-system/src/hooks/useSorting.ts b/libs/design-system/src/hooks/useSorting.ts index 4331f58ec..3aa4b1290 100644 --- a/libs/design-system/src/hooks/useSorting.ts +++ b/libs/design-system/src/hooks/useSorting.ts @@ -5,7 +5,7 @@ import { useCallback, useMemo } from 'react' import useLocalStorageState from 'use-local-storage-state' type Params = { - enabledColumns: ColumnId[] + visibleColumnIds: ColumnId[] defaultSortField?: SortField sortOptions?: { id: SortField }[] } @@ -14,7 +14,7 @@ export function useSorting( scope: string, params: Params ) { - const { defaultSortField, sortOptions, enabledColumns } = params + const { defaultSortField, sortOptions, visibleColumnIds } = params const [sortField, setSortField] = useLocalStorageState( `${scope}/sortField`, @@ -46,8 +46,11 @@ export function useSorting( return [] } const sortFieldIds = sortOptions.map((o) => o.id) - return intersection(sortFieldIds, enabledColumns as string[]) as SortField[] - }, [sortOptions, enabledColumns]) + return intersection( + sortFieldIds, + visibleColumnIds as string[] + ) as SortField[] + }, [sortOptions, visibleColumnIds]) return { toggleSort, diff --git a/libs/design-system/src/hooks/useTableState.ts b/libs/design-system/src/hooks/useTableState.ts index e6d68640d..258f28df1 100644 --- a/libs/design-system/src/hooks/useTableState.ts +++ b/libs/design-system/src/hooks/useTableState.ts @@ -5,7 +5,7 @@ import { useCallback, useMemo } from 'react' import useLocalStorageState from 'use-local-storage-state' import { useSorting } from './useSorting' -type Column = { +type TableColumn = { id: ColumnId label: string sortable?: boolean @@ -13,96 +13,80 @@ type Column = { category?: string } -const defaultDisabledCategories: string[] = [] - -type Params = { - columns: Column[] - columnsDefaultVisible: ColumnId[] +type Params= { + columns: Col[] + columnsDefaultVisible: Col['id'][] defaultSortField?: SortField sortOptions?: { id: SortField }[] - disabledCategories?: string[] } export function useTableState< - ColumnId extends string, + Column extends TableColumn, SortField extends string ->(scope: string, params: Params) { - const { - columns, - columnsDefaultVisible, - defaultSortField, - sortOptions, - disabledCategories, - } = { - disabledCategories: defaultDisabledCategories, +>(scope: string, params: Params) { + const { columns, columnsDefaultVisible, defaultSortField, sortOptions } = { ...params, } - const [_enabledColumns, setEnabledColumns] = useLocalStorageState( - `${scope}/enabledColumns`, - { - defaultValue: columnsDefaultVisible, - } - ) + const [_enabledColumnIds, setEnabledColumnIds] = useLocalStorageState< + string[] + >(`${scope}/enabledColumns`, { + defaultValue: columnsDefaultVisible, + }) const toggleColumnVisibility = useCallback( (column: string) => { - setEnabledColumns((enabled) => { + setEnabledColumnIds((enabled) => { if (enabled.includes(column)) { return enabled.filter((c) => c !== column) } return enabled.concat(column) }) }, - [setEnabledColumns] + [setEnabledColumnIds] ) const setColumnsVisible = useCallback( (columns: string[]) => { - setEnabledColumns((enabled) => { + setEnabledColumnIds((enabled) => { return uniq([...enabled, ...columns]) }) }, - [setEnabledColumns] + [setEnabledColumnIds] ) const setColumnsHidden = useCallback( (columns: string[]) => { - setEnabledColumns((enabled) => { + setEnabledColumnIds((enabled) => { return difference(enabled, columns) }) }, - [setEnabledColumns] + [setEnabledColumnIds] ) const resetDefaultColumnVisibility = useCallback(() => { - setEnabledColumns(columnsDefaultVisible) - }, [setEnabledColumns, columnsDefaultVisible]) + setEnabledColumnIds(columnsDefaultVisible) + }, [setEnabledColumnIds, columnsDefaultVisible]) const configurableColumns = useMemo( () => columns.filter((column) => { - const columnExplicitlyDisabled = disabledCategories?.includes( - column.category || '' - ) - return !column.fixed && !columnExplicitlyDisabled + return !column.fixed }), - [columns, disabledCategories] + [columns] ) - const enabledColumns = useMemo( + const visibleColumns = useMemo( () => - columns - .filter((column) => { - const columnIsLogicallyEnabled = - column.fixed || _enabledColumns.includes(column.id) - const columnExplicitlyDisabled = disabledCategories?.includes( - column.category || '' - ) - return columnIsLogicallyEnabled && !columnExplicitlyDisabled - }) - .map((column) => column.id), - [columns, _enabledColumns, disabledCategories] + columns.filter( + (column) => column.fixed || _enabledColumnIds.includes(column.id) + ), + [_enabledColumnIds, columns] + ) + + const visibleColumnIds = useMemo( + () => visibleColumns.map((column) => column.id), + [visibleColumns] ) const { @@ -114,7 +98,7 @@ export function useTableState< } = useSorting(scope, { defaultSortField, sortOptions, - enabledColumns, + visibleColumnIds, }) const sortableColumns = useMemo(() => { @@ -122,12 +106,16 @@ export function useTableState< return [] } const sortFieldIds = sortOptions.map((o) => o.id) - return intersection(sortFieldIds, enabledColumns as string[]) as SortField[] - }, [sortOptions, enabledColumns]) + return intersection( + sortFieldIds, + visibleColumnIds as string[] + ) as SortField[] + }, [sortOptions, visibleColumnIds]) return { configurableColumns, - enabledColumns, + visibleColumnIds, + visibleColumns, toggleColumnVisibility, toggleSort, setSortDirection,