feat(data-table): add column visibility storage functionality for API keys, channels, and usage logs

web/default/src/features/channels/components/channels-table.tsx

@@ -55,6 +55,8 @@ import { useChannels } from './channels-provider'
 import { DataTableBulkActions } from './data-table-bulk-actions'
 
 const route = getRouteApi('/_authenticated/channels/')
+const CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY =
+  'channels:column-visibility'
 
 const CHANNEL_SORTABLE_COLUMNS = new Set<ChannelSortBy>([
   'id',
@@ -268,6 +270,7 @@ export function ChannelsTable() {
       models: false,
       tag: false,
     },
+    columnVisibilityStorageKey: CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY,
     columnFilters,
     pagination,
     globalFilter,

web/default/src/features/keys/components/api-keys-table.tsx

@@ -57,6 +57,8 @@ import { DataTableBulkActions } from './data-table-bulk-actions'
 import { DataTableRowActions } from './data-table-row-actions'
 
 const route = getRouteApi('/_authenticated/keys/')
+const API_KEYS_COLUMN_VISIBILITY_STORAGE_KEY =
+  'api-keys:column-visibility'
 
 function isDisabledApiKeyRow(apiKey: ApiKey) {
   return apiKey.status !== API_KEY_STATUS.ENABLED
@@ -264,6 +266,7 @@ export function ApiKeysTable() {
     columns,
     enableRowSelection: true,
     columnFilters,
+    columnVisibilityStorageKey: API_KEYS_COLUMN_VISIBILITY_STORAGE_KEY,
     globalFilter,
     pagination,
     globalFilterFn: () => true,

web/default/src/features/usage-logs/components/usage-logs-table.tsx

@@ -49,6 +49,13 @@ const logTypeRowTint: Record<number, string> = {
   [LOG_TYPE_ENUM.REFUND]: 'bg-blue-50/30 dark:bg-blue-950/15',
 }
 
+function getColumnVisibilityStorageKey(
+  logCategory: LogCategory,
+  isAdmin: boolean
+): string {
+  return `usage-logs:${logCategory}:${isAdmin ? 'admin' : 'user'}:column-visibility`
+}
+
 function deserializeLogTypeFilter(value: unknown): unknown[] {
   const values = Array.isArray(value) ? value : value ? [value] : []
   return values.filter((item) => String(item) !== LOG_TYPE_ALL_VALUE)
@@ -146,6 +153,10 @@ export function UsageLogsTable({ logCategory }: UsageLogsTableProps) {
     data: logs as Record<string, unknown>[],
     columns: columns as ColumnDef<Record<string, unknown>>[],
     columnFilters,
+    columnVisibilityStorageKey: getColumnVisibilityStorageKey(
+      logCategory,
+      isAdmin
+    ),
     pagination,
     enableRowSelection: false,
     onPaginationChange,