October CMS resources and help articles

Simple and to the point. Optimized by the community.

Create a re-usable custom list column type with assets and partials

by BennoThommo, last modified on January 25th, 2021

While the October docs do have information on creating a custom list column type, they unfortunately use direct method callbacks, which can make it tricky to use assets for the column type.

By leveraging a List widget event and following the instructions below, you can create a complex custom list column type that supports asset injection into the controller, as well as partial rendering.

For the purposes of this trick, we are creating a graph list column type within the Acme.Demo plugin.


<?php namespace Acme\Demo\ColumnTypes;

use Event;

class Graph
    use \System\Traits\ViewMaker;
    use \System\Traits\AssetMaker;

     * @var \Backend\Classes\Controller Controller instance
    protected $controller;

     * @var bool Has the column type been rendered?
    protected $rendered = false;

     * @var bool Has the CSS been injected?
    protected $addedCss = false;

     * Constructor.
    public function __construct()
        // Inject CSS into controller, only if the column type is actually used
        Event::listen('backend.list.overrideColumnValue', function ($listWidget) {
            if ($this->rendered && !$this->addedCss) {
                $this->controller = $listWidget->getController();

                                // Add any additional CSS/JS assets here as required.

                $this->addedCss = true;

     * Renders the "graph" column type.
     * This is the callback which is registered in `registerListColumnTypes` in the Plugin definition file.
     * @param mixed $value
     * @param \Backend\Classes\ListColumn $column
     * @param \October\Rain\Database\Model $record
     * @return array|string
    public function renderValue($value, $column, $record)
        $this->rendered = true;

        return $this->makePartial('graph', [
                            // Add params for partial here


// ...

    public function registerListColumnTypes()
        return [
            'graph' => [
                new \Acme\Demo\ColumnTypes\Graph,

// ...

You can now create the following partials and assets:

  • /plugins/acme/demo/columntypes/graph/_graph.htm - Contains the HTML content to output for the column.
  • /plugins/acme/demo/columntypes/graph/assets/css/graph.css - Contains the CSS content that will be injected into the controller and added to the <head>.

The custom column type will now be available for use in all list widgets under the graph type.

For example:

            label: Progress
                type: graph



We use cookies to measure the performance of this website. Do you want to accept these cookies?