Data Table

Upload files and display them in a sortable data table with columns for name, size, type, and status.

What you should see: uploads feeding a sortable table, with each row's status updated from onComplete and onError as results arrive.

Name ↕	Size ↕	Type ↕	Status

Upload files to populate the table

var uploader = CoreUpload.create('#datatable-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: true,
 autoUpload: true,
 onFileAdded: function(file) {
 addToDataTable(file);
 },
 onTaskComplete: function(file) {
 updateDataTableStatus(file.name, 'Uploaded');
 },
 onTaskError: function(file, error) {
 updateDataTableStatus(file.name, 'Error');
 }
});

Uploads inside a data grid

Where the rest of the page is a grid, the upload queue should be one too. The events map cleanly onto rows: a file added is a row appended, progress is a cell update, completion swaps the status.

Sorting mid-upload needs care

If the user re-sorts while files are transferring, rows move and a naive implementation loses track of which row belongs to which task. Key rows by the task rather than by position — otherwise progress starts landing on the wrong line.