In the previous post I explained how we extended ember-models-table in
Open Event Frontend for rendering & handling all the table related operations like pagination in the application. In this post we will discuss about how we implemented custom cell layout using custom templates in ember-models-table.
We are going to see how we implemented custom cell layouts in Open Event Front-end.
Creating a custom cell template
The cell templates are partial components which allow us to customise the layout of each cell. We create a component using:
The cell-event component renders the image of the event along with its name for all events in the table.
Each row from the model is defined as record which represents an event. Here we create a header which consists of an event logo which is referenced as record.image in the model & the event name which is referenced as record.name in the template.
Defining columns & custom templates for each cell of the table
After creating all the templates we must specify which columns should use the cell templates. We can define this inside the columns array of objects(each column) to be rendered in the table. Each object has propertyName which represents the id of the column & title which will be rendered as the table header.
The template field for each column is used to pass the reference of template file which will be used to render the cell of the column. All the cell templates are created in components/ui-table/cell which can be found here.
Rendering the table with cell templates
To render the table with custom cell templates we need to pass the column array to the extended ember-models-table inside the route as :
The outcome of this change on the cells of column Name now looks like this:
Thank you for reading the blog, you can check the source code for the example here.