
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
ember-table
Advanced tools
An addon to support large data set and a number of features around table.
An addon to support large data set and a number of features around table. Ember Table can handle over 100,000 rows without any rendering or performance issues.
Ember Table 3.x supports:
For older platforms, the final release of Ember Table 2.x (2.2.3) supports:
ember install ember-table
Documentation is available at: https://opensource.addepar.com/ember-table/docs
Ember Table uses ember-cli-addon-docs for its documentation.
To run the docs locally, clone the repo, run yarn && yarn start
and then navigate to http://localhost:4200/docs
.
To use Ember Table
, you need to create columns
and rows
dataset.
columns
is an array of objects which has multiple fields to define behavior of the column.
The objects can be simple POJOs, and there are no hard requirements about their shape.
They may have a valuePath
, and if they do this path will be used to get the value from
each row for that column. If you only want to use the default template, you can also
specify a name
on the column which will be rendered in the template.
columns: [
{
name: `Open time`,
valuePath: `open`,
},
{
name: `Close time`,
valuePath: `close`,
},
];
rows
could be a javascript array, ember array or any data structure that implements length
and
objectAt(index)
. This flexibity gives application to avoid having all data at front but loads more
data as user scrolls. Each object in the rows
data structure should contains all fields defined
by all valuePath
in columns
array.
rows: computed(function() {
const rows = emberA();
rows.pushObject({
open: '8AM',
close: '8PM',
});
rows.pushObject({
open: '11AM',
close: '9PM',
});
return rows;
});
The following template renders a simple table.
{{#ember-table as |t|}}
{{t.head columns=columns}}
{{t.body rows=rows}}
{{/ember-table}}
You can use the block form of the table to customize its template. The component structure matches that of actual HTML tables, and allows you to customize it at any level. At the cell level, you get access to these four values:
value
- The value of the cellcell
- A unique cell cache. You can use this to track cell state without
dirtying the underlying model.column
- The column itself.row
- The row itself.You can use these values to customize cell in many ways. For instance, if you
want to have every cell in a particular column use a component, you can add a
component
field to your column (or feel free to use any other property name
you like):
{{#ember-table as |t|}}
{{t.head columns=columns}}
{{#t.body rows=rows as |b|}}
{{#b.row as |r|}}
{{#r.cell as |value column row|}}
{{component column.component value=value}}
{{/r.cell}}
{{/b.row}}
{{/t.body}}
{{/ember-table}}
The rendered table is a plain table without any styling. You can define styling for your own table.
If you want to use default table style, import the ember-table/default
SASS file.
You can also use the ember-tfoot
component, which has the same API as
ember-tbody
:
{{#ember-table as |t|}}
{{t.head columns=columns}}
{{t.body rows=rows}}
{{t.foot rows=footerRows}}
{{/ember-table}}
To support smooth migration from old version of Ember table (support only till ember 1.11), we have move the old source code to separate package ember-table-legacy. It's a separate package from this Ember table package and you can install it using yarn or npm. This allows you to have 2 versions of ember table in your code base and you can start your migrating one table at at time. The recommended migration steps are as follows (if you are using ember 1.11):
import EmberTable from 'ember-table/components/ember-table'
becomes
import EmberTableLegacy from 'ember-table-legacy/components/ember-table-legacy'
. Remove reference
of ember-table
in package.json
.ember-table-legacy
using yarn add ember-table-legacy
or npm install ember-table-legacy
ember-table
repo.We use release-it
.
To create a new release, run yarn run release
. To do a dry-run: yarn run release --dry-run
.
The tool will prompt you to select the new release version.
This library is documented using Ember Addon Docs. v0.6.3+ of that library bring a CSS reset files into the test suite of Ember Table, meaning many tests would be corrupted away from the useragent styles they were written against.
Because of this, building the docs requires going through Ember Try. For example to run tests asserting the docs build:
ember try:one ember-default-docs
You might also want to run a command with the addon docs libraries installed, for example to create a production build, and you can do so like this:
ember try:one ember-default-docs --- ember build -e production
FAQs
An addon to support large data set and a number of features around table.
We found that ember-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.