[FEATURE] - Ability to add custom columns

[eng-ahmad-sameer]

Summary

Adding a custom column in the list view would be good.

Basic Example

Something like this:

The content of the column will be a react element

Drawbacks

No response

Unresolved questions

• Should you display the custom column in edit view and how?
• Is there another way to achieve this functionality other than support adding a custom column?

[FacundoSpira]

Adding to this, I think it can be really useful to be able to define custom fields in the edit. For example, let's say that we have a "User" model with a field "hashedPassword". If we want to have a component to be able to change the user password, it would be really useful to do it in a different field "newPassword", so we can for example only send it when toggling a "change password" button. Then, in the beforeDb hook that was added we can check if the "newPassword" is coming as part of the data, and use its value to hash the password and save it in the "hashedPassword" field.

Right now there's no easy way at least to do this, since custom fields get striped out from the data object (so even creating a custom component for hashedPassword with two inputs, one for hashedPassword and one for newPassword doesn't work, since newPassword is removed from the data object.

[foyarash]

Hello

Thanks for both your suggestions. While i understand the use case for the custom fields in the edit options, I don't really see what can be the use case for the custom columns ? I'd be happy if you could give me a concrete use case of this. Thank you !

[eng-ahmad-sameer]

@foyarash

Thanks for your quick response.

It is not necessary to be a custom column, the current supported actions for the table row is a server action, but what if i want the action to apply a client side logic before the server logic. For example:

• the preview profile button, it could be added as an action in the actions dropdown, an the expected here(this will be a custom part provided from use) is when the user clicks on it a dialog will opened with a buyer card on it.
• another example is attach provider button, what if we have a patients table and i want to provide a feature for user to be able to attach providers for this patient with some custom attributes like rate, so i can add a button in the actions dropdown called attach provider that will open a modal that display a dropdown of providers and a rate number input under it with a save and cancel buttons.

And a lot of other examples, the main idea here is provide a client side logic to actions for user to interact with not only a server action.

[foyarash]

Ok i see, thank you for these examples. It should actually be possible to have client side actions with a separate property in the actions list. For cases where you need to display extra stuff in the UI, i think the extra columns feature with a custom component might be the solution but that would require some more investigations.

[FacundoSpira]

@foyarash would it make sense for the two things to be separate issues? Because I think that for the custom edit fields they should be treated only like "ghost" fields and they would not be related to the list view. I can create a separate issue for that, and maybe start looking into it if that helps.

[foyarash]

Yeah it would be better, they are not really related to the way custom columns should act.

You can start having a look at it if you want to, that would be really cool ! 😁 Thank you !

[eng-ahmad-sameer]

@foyarash if the provided examples could be handled by the client side actions as an option in the current actions drop-down, the custom columns and client side actions become two separate issues I can update the issue title and description if needed or open a new issue for client side actions.

[foyarash]

Hello @eng-ahmad-sameer ,

I'm gonna start working in the feature. Seeing your examples, i was thinking about the following : the actions array could contain actions with type: "dialog" that would always open up a dialog and display a custom component inside it, component that you would define just like you'd do for custom inputs. This component would receive the row data as props.

Would that fit your use cases ? Imo this would cover the most common use cases we could have, since "extra UI" for a row would be show in a dialog.

[eng-ahmad-sameer]

Hey @foyarash,

I agree with your hat you suggest, open a dialog will be good, but what if the user have a custom dialog component, if I am understanding you right, you will open a dialog and the user can put a custom component on it, but what if the user have a whole custom modal he need to trigger?

For example, some models has open animation and custom styles. Is what you suggest will fulfill this?

Thanks

Update: Maybe provide adding a whole custom action options is fulfill this? Like type: ’custom-action’ component: JSX element …etc

[foyarash]

My suggestion is to open a dialog that fits with the next-admin UI. The custom component you will pass is the content of the dialog.

[foyarash]

Update: Maybe provide adding a whole custom action options is fulfill this? Like type: ’custom-action’ component: JSX element …etc

That was my first thought, however, this implies that the user implements the same exact UI as what is currently rendered in the actions dropdown (https://github.com/premieroctet/next-admin/blob/main/packages/next-admin/src/components/ActionsDropdown.tsx).

Either i restrict this with the dialog solution, or I imply that the user will always respect the ActionDropdownItem implementation

[eng-ahmad-sameer]

Cool, could you also provide the ability to update the style of the dialog you know as tailwind classes to change the height, width, and other Styles.

[eng-ahmad-sameer]

Update: Maybe provide adding a whole custom action options is fulfill this? Like type: ’custom-action’ component: JSX element …etc

That was my first thought, however, this implies that the user implements the same exact UI as what is currently rendered in the actions dropdown (https://github.com/premieroctet/next-admin/blob/main/packages/next-admin/src/components/ActionsDropdown.tsx).

Either i restrict this with the dialog solution, or I imply that the user will always respect the ActionDropdownItem implementation

I think the dialog suggestion is better and less confusing. I believe you will support update the style of the dialog too, so the user can update the style and make the dialog the way and shape he want. Also because of the dialog is a client context so the user can do on it anything he want.

[foyarash]

Yes dialog with custom class name should be doable, just like we do on the form inputs. Thanks for confirming my thoughts on this 👍