fix(ui): reset columns state throwing errors (#11903)

### What?
Fixes `resetColumnsState` in `useTableColumns` react hook.

### Why?
`resetColumnsState` threw errors when being executed, e.g. `Uncaught (in
promise) TypeError: Cannot read properties of undefined (reading
'findIndex')`

### How?
Removes unnecessary parsing of URL query parameters in
`setActiveColumns` when resetting columns.

---------

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>

Author: tak-amboss

docs/admin/react-hooks.mdx

@@ -981,25 +981,46 @@ const MyComponent: React.FC = () => {
 
 ## useTableColumns
 
-Returns methods to manipulate table columns
+Returns properties and methods to manipulate table columns:
+| Property | Description |
+| ------------------------ | ------------------------------------------------------------------------------------------ |
+| **`columns`** | The current state of columns including their active status and configuration |
+| **`LinkedCellOverride`** | A component override for linked cells in the table |
+| **`moveColumn`** | A method to reorder columns. Accepts `{ fromIndex: number, toIndex: number }` as arguments |
+| **`resetColumnsState`** | A method to reset columns back to their default configuration as defined in the collection config |
+| **`setActiveColumns`** | A method to set specific columns to active state while preserving the existing column order. Accepts an array of column names to activate |
+| **`toggleColumn`** | A method to toggle a single column's visibility. Accepts a column name as string |
 
 ```tsx
 'use client'
 import { useTableColumns } from '@payloadcms/ui'
 
 const MyComponent: React.FC = () => {
   // highlight-start
-  const { setActiveColumns } = useTableColumns()
+  const { setActiveColumns, resetColumnsState } = useTableColumns()
 
-  const resetColumns = () => {
-    setActiveColumns(['id', 'createdAt', 'updatedAt'])
+  const activateSpecificColumns = () => {
+    // Only activates the id and createdAt columns
+    // Other columns retain their current active/inactive state
+    // The original column order is preserved
+    setActiveColumns(['id', 'createdAt'])
+  }
+
+  const resetToDefaults = () => {
+    // Resets to the default columns defined in the collection config
+    resetColumnsState()
   }
   // highlight-end
 
   return (
-    <button type="button" onClick={resetColumns}>
-      Reset columns
-    </button>
+    <div>
+      <button type="button" onClick={activateSpecificColumns}>
+        Activate Specific Columns
+      </button>
+      <button type="button" onClick={resetToDefaults}>
+        Reset To Defaults
+      </button>
+    </div>
   )
 }
 ```

packages/ui/src/providers/TableColumns/index.tsx

@@ -88,8 +88,8 @@ export const TableColumnsProvider: React.FC<TableColumnsProviderProps> = ({
   )
 
   const resetColumnsState = React.useCallback(async () => {
-    await setActiveColumns(defaultColumns)
-  }, [defaultColumns, setActiveColumns])
+    await refineListData({ columns: defaultColumns || [] })
+  }, [defaultColumns, refineListData])
 
   return (
     <TableColumnContext

test/admin/components/ResetColumns/index.tsx

@@ -5,7 +5,11 @@ import { Pill, useTableColumns } from '@payloadcms/ui'
 function ResetDefaultColumnsButton() {
   const { resetColumnsState } = useTableColumns()
 
-  return <Pill onClick={resetColumnsState}>Reset to default columns</Pill>
+  return (
+    <Pill id="reset-columns-button" onClick={resetColumnsState}>
+      Reset to default columns
+    </Pill>
+  )
 }
 
 export { ResetDefaultColumnsButton }

test/admin/e2e/list-view/e2e.spec.ts

@@ -1245,6 +1245,18 @@ describe('List View', () => {
         }),
       ).toBeVisible()
     })
+
+    test('should reset default columns', async () => {
+      await page.goto(postsUrl.list)
+      await toggleColumn(page, { columnLabel: 'ID', targetState: 'off', columnName: 'id' })
+
+      // should not have the ID column #heading-id
+      await expect(page.locator('#heading-id')).toBeHidden()
+
+      await page.locator('#reset-columns-button').click()
+
+      await expect(page.locator('#heading-id')).toBeVisible()
+    })
   })
 
   describe('multi-select', () => {