-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(admin-ui): Allow custom React components in data table columns
- Loading branch information
1 parent
c6f08c6
commit 5cde775
Showing
7 changed files
with
183 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/admin-ui/src/lib/react/src/components/react-custom-column.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Component, inject, InjectionToken, Input, OnInit, ViewEncapsulation } from '@angular/core'; | ||
| import { CustomColumnComponent } from '@vendure/admin-ui/core'; | ||
| import { ElementType } from 'react'; | ||
| import { ReactComponentHostDirective } from '../directives/react-component-host.directive'; | ||
|
|
||
| export const REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS = new InjectionToken<{ | ||
| component: ElementType; | ||
| props?: Record<string, any>; | ||
| }>('REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS'); | ||
|
|
||
| @Component({ | ||
| selector: 'vdr-react-custom-column-component', | ||
| template: ` <div [vdrReactComponentHost]="reactComponent" [props]="props"></div> `, | ||
| styleUrls: ['./react-global-styles.scss'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| standalone: true, | ||
| imports: [ReactComponentHostDirective], | ||
| }) | ||
| export class ReactCustomColumnComponent implements CustomColumnComponent, OnInit { | ||
| @Input() rowItem: any; | ||
|
|
||
| protected reactComponent = inject(REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS).component; | ||
| private options = inject(REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS); | ||
| protected props: Record<string, any>; | ||
|
|
||
| ngOnInit() { | ||
| this.props = { | ||
| rowItem: this.rowItem, | ||
| ...(this.options.props ?? {}), | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { APP_INITIALIZER } from '@angular/core'; | ||
| import { | ||
| DataTableColumnId, | ||
| DataTableCustomComponentService, | ||
| DataTableLocationId, | ||
| } from '@vendure/admin-ui/core'; | ||
| import { ElementType } from 'react'; | ||
| import { | ||
| REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS, | ||
| ReactCustomColumnComponent, | ||
| } from './components/react-custom-column.component'; | ||
|
|
||
| /** | ||
| * @description | ||
| * Configures a {@link CustomDetailComponent} to be placed in the given location. | ||
| * | ||
| * @docsCategory react-extensions | ||
| */ | ||
| export interface ReactDataTableComponentConfig { | ||
| /** | ||
| * @description | ||
| * The location in the UI where the custom component should be placed. | ||
| */ | ||
| tableId: DataTableLocationId; | ||
| /** | ||
| * @description | ||
| * The column in the table where the custom component should be placed. | ||
| */ | ||
| columnId: DataTableColumnId; | ||
| /** | ||
| * @description | ||
| * The component to render in the table cell. This component will receive the `rowItem` prop | ||
| * which is the data object for the row, e.g. the `Product` object if used in the `product-list` table. | ||
| */ | ||
| component: ElementType; | ||
| /** | ||
| * @description | ||
| * Optional props to pass to the React component. | ||
| */ | ||
| props?: Record<string, any>; | ||
| } | ||
|
|
||
| /** | ||
| * @description | ||
| * The props that will be passed to the React component registered via {@link registerReactDataTableComponent}. | ||
| */ | ||
| export interface ReactDataTableComponentProps { | ||
| rowItem: any; | ||
| [prop: string]: any; | ||
| } | ||
|
|
||
| /** | ||
| * @description | ||
| * Registers a React component to be rendered in a data table in the given location. | ||
| * The component will receive the `rowItem` prop which is the data object for the row, | ||
| * e.g. the `Product` object if used in the `product-list` table. | ||
| * | ||
| * @example | ||
| * ```ts title="components/SlugWithLink.tsx" | ||
| * import { ReactDataTableComponentProps } from '\@vendure/admin-ui/react'; | ||
| * import React from 'react'; | ||
| * | ||
| * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) { | ||
| * return ( | ||
| * <a href={`https://example.com/products/${rowItem.slug}`} target="_blank"> | ||
| * {rowItem.slug} | ||
| * </a> | ||
| * ); | ||
| * } | ||
| * ``` | ||
| * | ||
| * ```ts title="providers.ts" | ||
| * import { registerReactDataTableComponent } from '\@vendure/admin-ui/react'; | ||
| * import { SlugWithLink } from './components/SlugWithLink'; | ||
| * | ||
| * export default [ | ||
| * registerReactDataTableComponent({ | ||
| * component: SlugWithLink, | ||
| * tableId: 'product-list', | ||
| * columnId: 'slug', | ||
| * props: { | ||
| * foo: 'bar', | ||
| * }, | ||
| * }), | ||
| * ]; | ||
| * ``` | ||
| */ | ||
| export function registerReactDataTableComponent(config: ReactDataTableComponentConfig) { | ||
| return { | ||
| provide: APP_INITIALIZER, | ||
| multi: true, | ||
| useFactory: (dataTableCustomComponentService: DataTableCustomComponentService) => () => { | ||
| dataTableCustomComponentService.registerCustomComponent({ | ||
| ...config, | ||
| component: ReactCustomColumnComponent, | ||
| providers: [ | ||
| { | ||
| provide: REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS, | ||
| useValue: { | ||
| component: config.component, | ||
| props: config.props, | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| }, | ||
| deps: [DataTableCustomComponentService], | ||
| }; | ||
| } |
10 changes: 10 additions & 0 deletions
10
packages/dev-server/test-plugins/experimental-ui/components/CustomColumnComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { ReactDataTableComponentProps } from '@vendure/admin-ui/react'; | ||
| import React from 'react'; | ||
|
|
||
| export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) { | ||
| return ( | ||
| <a href={`https://example.com/products/${rowItem.slug}`} target="_blank"> | ||
| {rowItem.slug} | ||
| </a> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters