feat: expose useTableColumns hook (#7448)
fix #4990 (v3) ## Description Expose [useTableColumns](b160686fff/packages/ui/src/elements/TableColumns/index.tsx (L25)) hook from client exported members of the ui packages. The use of this hook, covered the case of custom ListView creation which was not possible due to the lack of possibility to select a file if we were in the "list-draw" view. With `useTableColumns` we can execute the `onClick` defined in `TableColumnsProvider` witch allows the selection on the clicked file.b160686fff/packages/ui/src/elements/ListDrawer/DrawerContent.tsx (L290-L296)## Use case CustomListView.tsx: ```ts const CustomListView = () => { // ... const tableColumns = useTableColumns() const handleItemClicked = (doc) => { const onClick = tableColumns.columns[0].cellProps?.onClick if (typeof onClick === 'function') { // we are in "list-drawer" view, execute the onClick function onClick({ cellData: undefined, collectionSlug: doc, rowData: doc, }) } else { // we are in "collection-admin" view, push the new route with next/navigation void router.push(`${collectionSlug}/${doc.id}`) } } return <div className={"list"}> {data.docs?.length > 0 && ( <RelationshipProvider> {docs.map((e, i) => ( <div className={"item"} key={i} onClick={() => handleItemClicked(e)}> // ... </div> ))} </RelationshipProvider> )} </div> } ``` This video shows the click of a file inside a CustomListView, in the case of an "admin-collection" view then a "list-drawer" view. https://github.com/user-attachments/assets/8aa17af5-a7aa-49de-b988-fc0db7ac8e47 - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change <!-- Please delete options that are not relevant. --> - [x] Chore (non-breaking change which does not add functionality) - [x] Bug fix (non-breaking change which fixes an issue) ## Checklist: - [x] Existing test suite passes locally with my changes
This commit is contained in:
@@ -18,6 +18,7 @@ export { useThrottledEffect } from '../../hooks/useThrottledEffect.js'
|
||||
export { useUseTitleField } from '../../hooks/useUseAsTitle.js'
|
||||
|
||||
// elements
|
||||
export { useTableColumns } from '../../elements/TableColumns/index.js'
|
||||
export { Translation } from '../../elements/Translation/index.js'
|
||||
export { default as DatePicker } from '../../elements/DatePicker/DatePicker.js'
|
||||
export { ViewDescription } from '../../elements/ViewDescription/index.js'
|
||||
|
||||
Reference in New Issue
Block a user