Add Crud Header Buttons

On each crud table instance, you can inject header buttons. Those header buttons are Vue2/Vue3 components that provide custom features to the current crud table. You'll use it to perform async requests on the selected entries or more.

Here is how you'll define your buttons.

You need to define a method "getHeaderButtons" on your crud component that will return an array of strings. Those strings are meant to be properties defined on nsExtraComponents which is a global variable that holds all customs Vue components defined and provided by either NexoPOS or custom modules.

Check here to see how to register custom Vue components.

Once injected, the components will be responsible for rendering the button itself and all the logic behind it. Assuming what is defined before, here is how we'll create our button component:

This will produce the following output.

Extends Other Crud Header Buttons

You can also inject a custom header button on other crud tables. It might be a crud defined by NexoPOS or by another module. On your module ServiceProvider, you'll first inject your customer module button.

Then, you'll inject a view at the footer of the crud table like so:

The inline function used as a callback for the "ProductCrud::method( 'getTableFooter' )" action, will load a view "footer.blade.php" defined at the "Resources" directory within the module "YourModule".