jarwol / atable Goto Github PK
View Code? Open in Web Editor NEWFast, flexible Javascript table component built on Backbone.js
License: MIT License
Fast, flexible Javascript table component built on Backbone.js
License: MIT License
Allow the user to pass in a function responsible for delivering data to the ATable. Rather than the web worker function which calls self.postMessage(data), the data function will call ATable.receivedData(data) directly.
Allow the user to provide an array of CSS classes to apply to cell content. They should be configurable at the table and column level.
Allow the user to prevent columns from rendering in the DOM by setting visible : false
. Also add public API methods ATable.hideColumn(name|index)
and ATable.showColumn(name)
.
The column headers and cells get out of sync if the table's parent element is a container with an explicit width set, and the table is resized to be larger than that width.
Use gruntjs to automate build tasks such as testing, validating with jshint, and concatenating/minifying the code.
Implement exportJson()
and exportArray()
which will return the data in the table as an array of objects or an array of arrays.
Implement a workaround for the lack of Blob support, and then tackle any other issues that arise during testing in IE.
Allow the user to provide fetchData functions that return data an arbitrary number of times (possible indefinitely). The table should either completely refresh or append the new rows, based on a boolean parameters.
Figure out how to not display the standard drop effect icons, and instead set the cursor to e-resize for resizing or pointer/move for moving.
Update unit tests to use a callback function instead of web workers so that they can run on older browsers.
Multiple atables on a page can result in columns being moved to other atables. This should be prevented by stamping a table identifier on the column during the dragStart event, and checking it against the target table before attempting a move operation.
When columns are hidden, the column header's cellIndex
property may not match up with its index in atable.columns
. Store a column's name in the DOM element so that it can be used to retrieve the correct column regardless of its position in the DOM.
Browser compatibility is poor for setDragImage (to wipe out the ghost image during a resize operation). Use mousemove/mouseup events for resizing columns to avoid these issues.
Rather than add a fixed number of pixels to the width of each column to account for a possible sort arrow being added, simply adjust the width as needed.
Ensure that the sort arrow renders on the same line as the column label in Firefox.
Adding the dataset to the backbone collection takes a substantial amount of time when number of rows reaches the hundreds of thousands. Look into changing the rows collection from a backbone collection into a custom object.
Only display the dashed border indicating a valid drop target if a column is dragged onto another column within its own ATable.
If an atable is rendered in a container with display: none
set, the right border disappears. Other display bugs may be occurring as well.
The dashed border is very inconsistent when dragging one column header over another.
After a column resize, tbody cells are out of sync with thead cells.
There's a bug that causes a slow down of the table and incorrect rendering when scrolling back up after scrolling down.
When dragging the scrollbar up or down, the cursor gets slightly ahead. This may mean the buffer rows are shrinking faster than the scrollTop is moving.
Allow the user to pass in callbacks to be executed upon events:
Provide a filter(colName, str)
method, causing the table to display only rows which contain the text str
in the specified column.
Sort by the displayed text content, disregarding HTML tags.
Allow users to resize, reorder, add, remove, and rename columns and sort the table programmatically.
Assign the resize indicator div an id in the form of "resizeX", where X is some unique integer. In order to guarantee a unique id, get a list of all .grayout elements in the document, and choose the largest id so far. Then take the integer from the end of the id, and increment it.
Allow the user to drag a column header to any cell in the destination column, instead of only the column header. Implement a better visual cue when the move operation is started.
Using Foundation adds some styles to the ATable that cause its appearance to be off.
Allow the user to configure a minimum and maximum width for resizable columns.
By default, every column is resizable and movable, and the table is sortable by all columns. Allow the user to configure each of these properties at the table level, and resizable/sortable at the column level.
Underscore 1.5 no longer allows bindAll to be called without function names to bind to all scoped functions. Call it with each function that requires a reference to the table.
If the vertical scrollbar is visible, subtract the scrollbar's width from the last column of each row. Otherwise there will be horizontal overflow in the tbody.
Rows are not correctly added/removed from the DOM as the table is scrolled up and down.
Instead of requiring a 2-dimensional array of data, allow receivedData
to return an array of JSON objects {columnName : value}.
If a column is moved, the incorrect value may be passed to the formatter function when cells are rendered/replaced. This happens because the column order should not be taken into account when indexing the dataset by the sortColumn.
Allow users to pass in a formatter function that will take the value of a cell and return the formatted value for all cells in a column.
Set the idAttribute of the ColumnCollection to Column.name
to allow constant time access to columns by their name. Remove the unnecessary columnsByName
hash.
Set cell content to be contenteditable if the user specifies an editable property in the column config or the table config.
When rows are removed from the table upon re-rendering or scrolling the table, the DOM objects are not garbage collected. This causes a massive memory leak.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.