A template driven Ember table that supports fixed columns, resizable columns, colspan headers, infinite scroll pagination, and collapsable (grouped) rows.
MIT License
A Glimmer-compatible Ember Component that renders HTML tables.
Here is the simplest way to get started with justa-table:
ember install cball/justa-table
ember install ember-cli-sass
Note: Ember CLI versions < 0.2.3 should use ember install:addon
instead of ember install
app.scss
@import "justa-table/justa-table-structure";
@import "justa-table/justa-table-appearance";
Currently, this addon is still in its very early stages, but it is usable.
You're encouraged to browse the full list of components available to your application, but everything starts by initializing a justa-table
block
and passing data down to it as content
:
{{#justa-table content=content as |table|}}
....
{{/justa-table}}
The justa-table
component will yield back a table
object, and you can use this within
it's block context to compose even more pieces of your table structure:
{{#justa-table content=content as |table|}}
{{#table-columns table=table as |row|}}
{{table-column
row=row
width=190
headerName='Name'
valueBindingPath='displayName'}}
{{#table-column headerName='Image'}}
<a href="#">
<img src={{row.image}} height="32" {{action 'imageClicked' row}} />
</a>
{{/table-column}}
{{#each dynamicColumns as |dynamicColumn index|}}
{{table-column
row=row
index=index
width=dynamicColumn.width
headerName=dynamicColumn.label
valueBindingPath=dynamicColumn.value}}
{{/each}}
{{/table-columns}}
{{/justa-table}}
justa-table
Component APIThe root component that sets up the overall structure of the table and stores its content
. When provided with content, this yields itself back to its template's block scope, and serves as
a container for composing inner table components.
As mentioned, the justa-table
component represents the root of the addon. It's in charge of setting up your overall table structure, storing your content
, and establishing a template block context for composing inner justa-table
child components.
Parameters:
content
{Array
} required: A list of objects -- where each object will constitute one of the table's rows.
default: null
tableHeight
{number
}: The initial and max height of the table. ✋ NOTE: The table will overflow if rows exceed this number.
default: 500
rowHeight
{number
}: The height or each row in the table.
default: 37
paginate
{boolean
}: Whether or not the table should use pagination. If true, a new page will fire the on-load-more-rows
action when it enters the viewport.
default: false
rowClasses
{Array
}: CSS classes to apply to table rows.
default: null
caption
{string
}: Content to be placed within a <caption>
element.
If applied, this element will be rendered as the first child node of the <table>
.
default: null
captionAlignment
{string
}: "left", "center", or "right" text alignment for the caption.
default: null
hideCaption
{boolean
}: hide the table caption from view, but still render it
for accessibility.
default: false
rowGroupDataName
{string
}: The name of data property for row groups in the table columns.
If using a collapsable
table, the justa-table
component will add a dynamic key to each row in the collapseTableData
based on the rowGroupDataName
that recomputes the collapseTableData
.
default: 'data'
constraint: Must be using a collapsable
table with collapseTableData
hideOffscreenContent
{boolean
}: Whether or not the component should hide out-of-viewport
content (vertical only for now).
default: false
offscreenContentBufferSize
{number
}: The amount of additional rows to load on to the
top/bottom of the viewport when hiding offscreen content.
This will round up/down to the nearest row.
default: 0.5
git clone https://github.com/cball/justa-table.git
cd justa-table
npm install
bower install
ember server
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.