Skip to content

Instantly share code, notes, and snippets.

@patrickberkeley
Created March 13, 2020 19:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patrickberkeley/29cdc690d0e933a5bd3bf58c68bc98bc to your computer and use it in GitHub Desktop.
Save patrickberkeley/29cdc690d0e933a5bd3bf58c68bc98bc to your computer and use it in GitHub Desktop.
fast table
import Component from '@glimmer/component'
import { inject as service } from '@ember/service';
import { get, computed } from '@ember/object';
export default class FastTable extends Component {
get tbody() {
const data = this.args.data;
const tbodyFragment = document.createDocumentFragment();
const tbody = document.createElement('tbody');
for (let index = 0; index < data.length; index++) {
const trFragment = document.createDocumentFragment();
const tr = document.createElement('tr');
const datum = data[index];
for (let column of this.args.columns) {
let value = get(datum, column);
const td = document.createElement('td');
td.appendChild(document.createTextNode(value));
trFragment.appendChild(td);
}
tr.appendChild(trFragment);
tbodyFragment.appendChild(tr);
}
tbody.appendChild(tbodyFragment);
return tbody;
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
columns = ['id', 'first', 'last', 'number', 'age'];
data = Array(50000).fill(null).map( (x,i) => {
const datum = {};
this.columns.forEach((column) => {
datum[column] = i;
});
return datum;
});
}
<FastTable
@data={{this.data}}
@columns={{this.columns}}
/>
<table>
{{this.tbody}}
</table>
{
"version": "0.17.0",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.16.3",
"ember-template-compiler": "3.16.3",
"ember-testing": "3.16.3"
},
"addons": {
"@glimmer/component": "1.0.0",
"ember-data": "3.16.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment