Matrix Table You can create matrix tables with any dimensions easily


You can create matrix tables with any dimensions easily


This plugin can build matrix tables with a super ease. Only you need to define column and row names. Then fill the table as you need. It's all!

How to use?

  • Go to Matrix Tables page and create a new matrix table
  • Fill details, Columns and Rows fields for building a scheme
  • Go to Table Datas page and open same matrix table
  • Fill table with the data. It will be shown on the frontend as you can see on the backend. It is WYSIWYG

TODOs: (by priority)

  • Import data to table from CSV

Demo Backend Account

If you want to examine the detailed backend functionality, please kindly ask for login details.



There is only one component for showing one matrix table for each tables on the frontend. You just need to add Matrix Table Component to a page which you want to show on.

Codes you will use

  • {% component 'matrixTable' %} is enough for showing the rendered table.
  • Also you can find all data of the same model of the matrix table by {{ matrixTable.tableData }} method

Styling the table

Rendered html template is suitable with Bootstrap's table directives. Here is the scheme for a rendered table:
<table class="table table-bordered table-hover uxms-table">
            <th colspan="4" style="text-align: center;">COLUMNS TOP NAME (DESCRIPTION)</th>
            <th><span>COLUMN NAME 1</span></th>
            <th><span>COLUMN NAME 2</span></th>
            <td class="list-checkbox">ROW NAME 1</td>
                <div>ROW DATA 1</div>
                <div>ROW DATA 2</div>
As you can see, you can handle elements by selecting .uxms-table in your CSS codes.
i.e.: .uxms-table thead th {text-align: center;}