Oracle JET - Simple table

May 1, 2016    Oracle JET oj.Table Blog Post

This is an example of using oj.Table with static data.


If you need a table in your application try out oj.Table. In this example, the table is using an array but you have other options for populating the table, like using a Knockout.js array or an Oracle JET Collection ( oj.Collection).


Oracle JET - oj.Table with static data

Using static data is a great place to start

oj.Table - Simple

Sorting

By default, all of the columns have sort enabled. We can make a couple of quick changes so that only one of the colmns can be sorted.

First, disable sorting for the table by setting the sortable attribute columnsDefault: {sortable: 'disabled'}, then add the sortable attribute to the specific column you want to sort sortable: 'enabled'. Here is a look at the code for the table with sort enabled for the id column.

<table id="table" summary="Department List" aria-label="Departments Table"
       data-bind="ojComponent: {component: 'ojTable', 
                                data: datasource, 
                                columnsDefault: {sortable: 'disabled'}, 
                                columns: [{headerText: 'Id', 
                                           field: 'DeptId',
                                           sortable: 'enabled'},
                                          {headerText: 'Name', 
                                           field: 'DeptName'},
                                          {headerText: 'Location Id', 
                                           field: 'LocationId'},
                                          ]}">
</table>


Code

See the Pen Oracle JET - oj.Table


blog comments powered by Disqus