Customizing a resource

Custom layouts

If you wish to have full control over which components are used in the resource pages you can achieve this by supplying the names of your components in your resource class by overriding these methods:

• indexComponent() : used to define custom component for changing the layout on the index view of a resource

• showComponent(): used to define custom layout on the show / define view of a resource

• createComponent(): used to define custom layout on the create view of a resource

• editComponent(): uses to define custom layout on the edit view of a resource

• indexTable(): used to define the default resource table used on the index of a resource

• resourceDetail(): used to define the detail component of the detail page

• baseForm(): used to define the form component on the create / edit page

Example

info

If you are choosing for custom components first look at the default components which props are required

An example of props passed to the component:

<component
    :is="resource.components.index_table"
    :key="resource.name"
    ref="resourceTable"
    :resource="resource"
/ >

Below you can see an example of how you define your custom page component in the resource class:

class Employee extends QoreResource
{
    /**
     * @return string
     */
    public function indexTable(): string
    {
        return 'Qoretable';
    }
}

and in your component registration:

import QoreTable from 'components/QoreTable'

Vue.component('QoreTable', QoreTable)