This is a component supporting table component for ember apps. It features sorting and endless scrolling.
The usage may look a little complicated. This is because you can use any template code you would normally use outside of this component. You even could use another fabulous table inside a cell of your first usage of fabulous table.
yarn add fabulous-table
(or npm install fabulous-table
)
headerClass
adds a CSS class to the header of a column. (String)orderPath
defines the key of an item by which this column will sort. If you omitorderPath
this column is not sortable. (String)orderBy
specifies the default key by which the table will be sorted on rendering. (String)orderDirection
specifies the default direction for the sorting on rendering. (String)changeOrder
is the action which is called on a click on a header. ('asc'
or'desc'
)modelName
is the ember model's name of the records. (String)limit
specifies the maximum amount of items for the initial rendering. Also this enables endless scrolling: This amount is fetched if you scrolled to bottom. (Number)rowAction
is the action which is called on a click on a row. ((action 'actionName')
)fixedHeader
fixes the header at the top of the table if the table itself will scroll (true
orfalse
)noSpinner
Hides the spinner at the bottom of the page (true
orfalse
)model
contain the records. (Object)cellClass
adds a CSS class to each cell of this column. (String)preventPropagation
stops propagation if the click event of that cell. (true
orfalse
)
As you can see the headers are separated from the cells. You can use a different orderPath
as you use in the cell.
The table provides the normal table layout (it uses table
tags inside) but you can add layout classes like bootstrap
or whatever you are using.
To serve the dummy app run ember serve
.
If you've changed something in the addon and want to see those changes in the dummy app you have to link the addon.
yarn link
cd tests/dummy && yarn link fabulous-table