feat: column visibility and ordering for offeringspage

src/green-app/src/app/listing-tool/listing-tool-table-columns.tsx

@@ -13,17 +13,19 @@ import { ColumnDef } from '@tanstack/react-table'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
+import { tagColumn } from '@/components/table-columns/tag-column'
 dayjs.extend(relativeTime)
 dayjs.extend(utc)
 
 export const listingToolTableEditModeColumns = (): ColumnDef<IDisplayedItem>[] => [
   checkColumn(),
   nameColumn(),
   propsColumn(),
-  // itemTag(),
+  tagColumn(),
   tabsColumn(),
   quantityColumn(),
   historyColumn(),
+  historyColumn({ mode: '7 days' }),
   priceInputColumn(),
   priceColumn({
     accessorKey: 'calculatedPrice',
@@ -34,10 +36,10 @@ export const listingToolTableEditModeColumns = (): ColumnDef<IDisplayedItem>[] =
     accessorKey: 'calculatedTotal',
     headerName: 'Total Value',
     accessorFn: (item) => item.calculatedTotalPrice
+  }),
+  priceColumn({
+    accessorKey: 'cumulative',
+    headerName: 'Commulative',
+    cumulativeColumn: 'calculatedTotal'
   })
-  // priceColumn({
-  //   accessorKey: 'cumulative',
-  //   headerName: 'Commulative',
-  //   cumulative: true
-  // })
 ]

src/green-app/src/app/listing-tool/listing-tool-table.tsx

@@ -4,7 +4,14 @@
 import DataTable, { DataTableOptions } from '@/components/data-table/data-table'
 import { useSkipper } from '@/hooks/useSkipper'
 import { IDisplayedItem } from '@/types/echo-api/priced-item'
-import { ColumnDef, FilterFnOption } from '@tanstack/react-table'
+import {
+  Column,
+  ColumnDef,
+  ColumnOrderState,
+  FilterFnOption,
+  Table,
+  VisibilityState
+} from '@tanstack/react-table'
 import { atom } from 'jotai'
 import { memo, useMemo } from 'react'
 import { useListingToolStore } from './listingToolStore'
@@ -18,6 +25,11 @@ interface DataTableProps {
   globalFilter: string
   onGlobalFilterChange: (value: string) => void
   globalFilterFn?: FilterFnOption<IDisplayedItem>
+  columnVisibility: VisibilityState
+  columnOrder: ColumnOrderState
+  onColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>
+  onColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>
+  tableRef: React.MutableRefObject<Table<IDisplayedItem> | undefined>
 }
 
 // Tutorial: https://ui.shadcn.com/docs/components/data-table
@@ -27,7 +39,12 @@ const ListingToolTable = ({
   isLoading,
   globalFilter,
   onGlobalFilterChange,
-  globalFilterFn
+  globalFilterFn,
+  columnVisibility,
+  columnOrder,
+  onColumnVisibility,
+  onColumnOrder,
+  tableRef
 }: DataTableProps) => {
   //   const { t } = useTranslation();
 
@@ -51,20 +68,34 @@ const ListingToolTable = ({
       onGlobalFilterChange: onGlobalFilterChange,
       onRowSelectionChange: setSelectedItems,
       globalFilterFn: globalFilterFn,
+      onColumnVisibilityChange: onColumnVisibility,
+      onColumnOrderChange: onColumnOrder,
       state: {
         rowSelection: selectedItems,
-        globalFilter: globalFilter
+        globalFilter: globalFilter,
+        columnVisibility: columnVisibility,
+        columnOrder: columnOrder
       },
       initialState: {
         pagination: {
           pageSize: 25
         },
         sorting: [
-          {
-            desc: true,
-            id: 'valuation'
-          }
-        ]
+          columnVisibility['2_day_history'] ?? true
+            ? {
+                desc: true,
+                id: '2_day_history'
+              }
+            : {
+                desc: true,
+                id: '7_day_history'
+              }
+        ],
+        columnVisibility: {
+          tag: false,
+          cumulative: false,
+          '7_day_history': false
+        }
       },
       meta: {
         // https://muhimasri.com/blogs/react-editable-table/
@@ -76,10 +107,14 @@ const ListingToolTable = ({
     }
   }, [
     autoResetPageIndex,
+    columnOrder,
+    columnVisibility,
     columns,
     globalFilter,
     globalFilterFn,
     modifiedItems,
+    onColumnOrder,
+    onColumnVisibility,
     onGlobalFilterChange,
     selectedItems,
     setSelectedItems,
@@ -89,7 +124,12 @@ const ListingToolTable = ({
 
   return (
     <div className={className}>
-      <DataTable options={tableOptions} pageSizes={pageSizes} isLoading={isLoading} />
+      <DataTable
+        options={tableOptions}
+        pageSizes={pageSizes}
+        isLoading={isLoading}
+        tableRef={tableRef}
+      />
     </div>
   )
 }

src/green-app/src/app/listing-tool/page.tsx

@@ -23,12 +23,19 @@ import { PoeItem } from '@/types/poe-api-models'
 import { SageDatabaseOfferingType } from '@/types/sage-listing-type'
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { FilterFn, filterFns } from '@tanstack/react-table'
+import {
+  Column,
+  ColumnOrderState,
+  FilterFn,
+  Table,
+  VisibilityState,
+  filterFns
+} from '@tanstack/react-table'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { atom, useAtom, useAtomValue } from 'jotai'
 import { ArrowLeftToLineIcon, ArrowRightToLineIcon } from 'lucide-react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useShallow } from 'zustand/react/shallow'
 import { ListingCard } from './listing-card'
@@ -37,6 +44,10 @@ import ListingToolTable from './listing-tool-table'
 import { listingToolTableEditModeColumns } from './listing-tool-table-columns'
 import { getCategory, useListingToolStore } from './listingToolStore'
 import MyOfferingsCard from './my-offerings-card'
+import TableColumnToggle from '@/components/table-column-toggle'
+import { IDisplayedItem } from '@/types/echo-api/priced-item'
+import React from 'react'
+import { atomWithLocalStorage } from '@/lib/localstorageAtom'
 dayjs.extend(utc)
 
 // TODO:
@@ -53,6 +64,16 @@ type PageProps = {}
 
 const showRightSidePanelAtom = atom(false)
 
+const columnOrderAtom = atomWithLocalStorage<ColumnOrderState>('listing-tool-table-columnOrder', [])
+const columnVisiblityAtom = atomWithLocalStorage<VisibilityState>(
+  'listing-tool-table-columnVisibility',
+  {
+    tag: false,
+    cumulative: false,
+    '7_day_history': false
+  }
+)
+
 export default function Page() {
   const queryClient = useQueryClient()
 
@@ -174,6 +195,14 @@ export default function Page() {
     setRefetchAll([refetchAll])
   }, [])
 
+  const tableRef = useRef<Table<IDisplayedItem> | undefined>()
+  const [columnVisibility, setColumnVisibility] = useAtom(columnVisiblityAtom)
+  const [columnOrder, setColumnOrder] = useAtom(columnOrderAtom)
+  const handleTableReset = useCallback(() => {
+    tableRef.current?.resetColumnOrder()
+    tableRef.current?.resetColumnVisibility()
+  }, [])
+
   return (
     <>
       <ListingToolHandler
@@ -211,7 +240,7 @@ export default function Page() {
             </div>
           </div>
           <div className="flex flex-col w-[1024px]">
-            <div className="flex flex-row justify-start items-center pb-2 gap-x-2">
+            <div className="flex flex-row justify-start items-center pb-2 gap-2">
               <DebouncedInput
                 value={globalFilter ?? ''}
                 onChange={(value) => setGlobalFilter(String(value))}
@@ -249,6 +278,14 @@ export default function Page() {
                 />
               </div>
               <div className="flex-1" />
+              <TableColumnToggle
+                columns={columns as any}
+                columnVisibility={columnVisibility}
+                columnOrder={columnOrder}
+                onColumnVisibility={setColumnVisibility}
+                onColumnOrder={setColumnOrder}
+                resetTable={handleTableReset}
+              />
               <AlertDialog>
                 <AlertDialogTrigger asChild>
                   <Button variant="outline" size="default">
@@ -286,13 +323,6 @@ export default function Page() {
                   <ArrowRightToLineIcon className="w-4 h-4" />
                 )}
               </Button>
-              {/* <Button
-              variant="secondary"
-              size="default"
-              onClick={() => setShowFilter((prev) => !prev)}
-            >
-              Show Filter
-            </Button> */}
             </div>
             <ListingToolTable
               className=""
@@ -301,6 +331,11 @@ export default function Page() {
               globalFilter={globalFilter}
               onGlobalFilterChange={setGlobalFilter}
               globalFilterFn={fuzzyFilter as any}
+              columnVisibility={columnVisibility}
+              columnOrder={columnOrder}
+              onColumnVisibility={setColumnVisibility}
+              onColumnOrder={setColumnOrder}
+              tableRef={tableRef}
             />
           </div>
           {showRightSidePanel && (

src/green-app/src/components/data-table/data-table.tsx

@@ -10,6 +10,7 @@ import {
 import { cn } from '@/lib/utils'
 
 import {
+  Table as DataTable,
   TableOptions,
   flexRender,
   getCoreRowModel,
@@ -18,9 +19,9 @@ import {
   getSortedRowModel,
   useReactTable
 } from '@tanstack/react-table'
+import { RefreshCwIcon } from 'lucide-react'
 import React, { memo } from 'react'
 import { TablePagination } from '../table-pagination'
-import { RefreshCwIcon } from 'lucide-react'
 
 export type DataTableOptions<TData> = Omit<
   TableOptions<TData>,
@@ -31,9 +32,10 @@ type DataTableProps<TData> = {
   options: DataTableOptions<TData>
   pageSizes?: number[]
   isLoading?: boolean
+  tableRef?: React.MutableRefObject<DataTable<TData> | undefined>
 }
 
-const DataTable = <TData,>({ options, pageSizes, isLoading }: DataTableProps<TData>) => {
+const DataTable = <TData,>({ options, pageSizes, isLoading, tableRef }: DataTableProps<TData>) => {
   const table = useReactTable({
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
@@ -44,6 +46,10 @@ const DataTable = <TData,>({ options, pageSizes, isLoading }: DataTableProps<TDa
     ...options
   })
 
+  if (tableRef) {
+    tableRef.current = table
+  }
+
   const columnSizeVars = React.useMemo(() => {
     const headers = table.getFlatHeaders()
     const colSizes: { [key: string]: number } = {}