Home
A highly flexible table addon for Ember 1.13.11 and higher
- Client side sorting
- Client side substring searching
- Client side pagination
- Bounded cell data
- Promise support in cells
- Component as cell
- Resizable columns
- Create columns from Model
- Inbuilt formatting using txt helper from em-helpers
- Add latest em-table as dependency in your project's
package.json - Run
npm install - Add the table using
{{em-table columns=columns rows=rows ...}} - Checkout the demo app to see a sample implementation. Its under
tests/dummy/app.
There are two definition classes and the em-table tag itself that helps to change the way table look. TableDefinition helps to define how the table looks & works. ColumnDefinition class helps to define how each of the column looks. em-table tag accepts these two and few other properties.
Following properties are accepted by the main table component via {{em-table}} tag.
Every instance of em-table must have a dedicated definition and dataProcessor. Sharing definition and dataProcessor instances between multiple tables might cause unexpected results. Please take this into consideration while setting the properties.
- definition
- Instance of TableDefinition class.
- By default em-table uses an instance of TableDefinition with the default values.
- Instance must be dedicated for current table.
- dataProcessor
- All the data processing like sort, search & pagination happens here.
- By default em-table uses an instance of DatProcessor class with the default values.
- Instance must be dedicated for current table.
- definitionClass
- Alternative to #1 definition property
- Reference to TableDefinition class or any of its children.
- em-table will create the instance when required.
- Class can be shared between tables.
- dataProcessorClass
- Alternative to #2 dataProcessor property
- Reference to DatProcessor class or any of its children.
- em-table will create the instance when required.
- Class can be shared between tables.
- columns
- Must be an Ember.Array of column definitions.
- Its an alias to table definition's columns property.
- rows
- An Ember.Array of Ember.Object(s).
- Its an alias to data processor's rows property.
- enableSort
- An alias to table definition's enableSort property.
- enableSearch
- Its an alias to table definition's enableSearch property.
- enablePagination
- Alias to table definition's enablePagination property.
- rowCount
- Alias to table definition's rowCount property.
- headerComponentNames
- Array of component names that would be added into the table header.
- By default it's
['em-table-search-ui', 'em-table-pagination-ui']. - The components would be passed properties tableDefinition & dataProcessor
- footerComponentNames
- Array of component names that would be added into the table header.
- By default it's
['em-table-pagination-ui']. - The components would be passed properties tableDefinition & dataProcessor
... and all other properties supported by ember components.
Following properties are available to customize the table. To pass-on these properties, create an instance of TableDefinition with these in your controller and pass it to em-table using the definition property.
import TableDefinition from 'em-table/utils/table-definition';
Search
- enableSearch
- Defaults to true
- searchText
- A two-way bounded string variable to set or get the current searched value.
- Uses substring search for matching.
Sort
- enableSort
- Defaults to true
- sortColumnId
- A two-way bounded string variable to set or get the current sorted column.
- Value must be same as the id property defined in ColumnDefinition.
- sortOrder
- A two-way bounded string variable to set or get the current sorted column.
- Values are asc/desc/null string.
Pagination
- enablePagination
- Defaults to true
- pageNum
- Defaults to 1
- A two-way bounded string variable to set or get the currently displayed page.
- rowCount
- Defaults to 10
- A two-way bounded string variable to set or get the number of rows currently displayed.
- rowCountOptions
- An array of row numbers.
- Defaults to [5, 10, 25, 50, 100]
- A two-way bounded string variable to set or get the options displayed in the pagination UI's row selector.
Others
- enableColumnResize
- Defaults to true
- minRowsForFooter
- Helps to control the display of table footer.
- Defaults to 25
- If number of rows displayed in the table is grater than minRowsForFooter, footer will be displayed.
- columns
- An Ember.Array of column definitions.
- Alias of em-table's columns property.
- recordType
- A string that denotes the type of record displayed. Used while showing messages.
Following properties are available to customize each column.
import ColumnDefinition from 'em-table/utils/column-definition';
- id
- To reference the specific column
- headerTitle
- Column header title. 'Not Available' will be displayed if not specified.
- cellComponentName
- String name of the component to be used in the cell.
- By default its the em-table-cell, it displays plain text.
- Set that to em-table-linked-cell and pass the respective values in getCellContent to display links.
- enableSearch
- If true the column will be considered on search.
- enableSort
- If true sort button will be displayed in the table header.
- enableColumnResize
- If true column resize button will be displayed in the table header.
- contentPath
- Path on the record/row from which value must be taken.
- observePath
- If true cell display would be bounded.
- getCellContent would be called whenever the value change.
- beforeSort
- This callback would be called before sorting on this specific column. Return false if you want to abort sorting.
- When called this = column definition, first argument = column definition.
- getCellContent
- This function will be called on init, or whenever the value at the specific path change (If observePath is true).
- If a component is specified in cellComponentName, the component would be passed a hash named content with the value returned by this function
- When called this = column definition, first argument = row.
- getSearchValue
- Called for each cell on searching with the respective row as first argument.
- Must return a string and JavaScript match function would be used for finding a substring match.
- When called this = column definition, first argument = row.
- getSortValue
- Called for each cell under the sorted column with the respective row as first argument.
- Javascript's native arithmetic operation > & < would be used over the returned value for sorting.
- When called this = column definition, first argument = row.
Following static functions are also available.
- ColumnDefinition.make
- Helps to create column definitions from normal objects.
- Pass an object, and it would return a ColumnDefinition instance with the values set.
- Pass an array of objects, and it would return an Ember.Array of ColumnDefinition instances with the values set.
- ColumnDefinition.makeFromModel(ModelClass, columnOptions)
- Makes ColumnDefinition array from an Ember-Model Class.
- A column will be created for each attribute names in the model.
- Values passed in columnOptions will be set on all the definitions.
- Check the dummy app for sample
Following properties are available to customize data processing. Set your instance into em-table's dataProcessor processor property to make your custom changes work.
- isSorting
- true when sorting is happening
- isSearching
- true when searching is happening
- rows
- Ember array of all the rows to be displayed.
- Alias of em-table's rows property.
- totalPages
- A computed property that denotes the total number of pages.
- Computed based on number of searched rows & rowCount in tableDefinition.
- processedRows
- Rows that are actually displayed on the table.
- Even this is a computed property and pagination happens here.
Following functions are available to override.
- startSearch
- Called when searching is started.
- _searchedRows is supposed to be set on completion. (Would be changed soon with a promises based approach)
- startSort
- Called when sorting is started.
- _sortedRows is supposed to be set on completion. (Would be changed soon with a promises based approach)
import TableDefinition from 'em-table/utils/table-definition';import ColumnDefinition from 'em-table/utils/column-definition';import DataProcessor from 'em-table/utils/data-processor';
And then you can do export default Ember.TableDefinition.extend({... custom implementation ...});. Instantiate it and pass-on to em-table like {{em-table definition=CustomDefinitionInstance ...}} to see the effect.