vaadin / vaadin-grid Goto Github PK
View Code? Open in Web Editor NEWvaadin-grid is a free, high quality data grid / data table Web Component. Part of the Vaadin components.
Home Page: https://vaadin.com/components
License: Apache License 2.0
vaadin-grid is a free, high quality data grid / data table Web Component. Part of the Vaadin components.
Home Page: https://vaadin.com/components
License: Apache License 2.0
Having a
<v-grid style="height: 300px">
<table>
<!-- more rows than the default visible row count -->
</table>
</v-grid>
Sorting a column repeatedly causes the height
to be switched between 300px
and height that equals the amount of the default visible rows.
This is a test, so as we can whether zappier copies issues to trello.
Hi I'm getting this warning while attempting to add <v-grid>
to my project:
Failed to execute 'write' on 'Document': It isn't possible to write into a document
from an asynchronously-loaded external script unless it is explicitly opened.
VaadinGridImport.nocache.js:3
The gird's header is rendered but the content is missing. With inline data everything works fine.
There should be a visible divider between the body rows and the footer rows (similarly, not necessarily identically, as with the header rows).
The row hover effect should be removed from the footer rows.
I'm relatively new to polymer so this is probably a newbie question, but how do I change the default color of header to something else than the default blue?
If a custom renderer places extra elements (e.g. a <div>
) inside the grid body cells, scrolling is unexpectedly stopped when the scroll events are caught by those elements (or so it seems).
Adding pointer-events: none;
for the custom renderer elements works as a workaround, but that won’t work for custom renderers that require user input.
The sort indicator arrows are HUGE on IE11
Here's a snippet that causes the error
var g = new VGrid(); // or document.createElement("v-grid");
g.columns = [{headerContent: "foo"}];
g.data.source = ["bar"];
document.body.appendChild(g);
This snippet will hide the first grid on the page
var ds = [[1]];
var grid = document.querySelector("v-grid");
grid.data.source = ds;
grid.then(function(){
ds.splice(0, 1);
grid.data.clearCache();
});
Result: top-left checkbox stays with a semi-selected state.
Expected: should reset to empty selection state.
Verified in Edge version:
If you are binding to a list of objects like [{color: 'red', type: 'volvo', year: ''}]
or arrays like [['red', 'volvo', '']]
empty string values causes IE to crash epically. This only happens when developer tools are closed, which makes it near impossible to debug.
It would be great if v-grid supported selecting a contiguous range of rows via the common shift-click (i.e. select first row in desired range then shift-click last desired row in range) interaction pattern.
Being able to click-drag to progressively select & unselect rows in a similar manner would be handy too, but this is less conventional.
The current default text renderer for cells (used to provide text-overflow: ellipsis;
, added in 228f4e3) is also used if the content of a cell is HTML (when using a light DOM data source).
Hey,
thanks a lot for that amazing example. Npm, grunt,... seems to make things so more simple.
Specially the way you implemented the tests. Will do it in my project too!
Thanks a lot for that great sample...
Florian
When the selection mode is set to multi and some items are selected, the select all checkbox goes into indeterminate mode. Now when it's clicked, the mode should switch to "all" but instead it just clears the select all -checkbox.
It works the other way around though ("all" -> "multi")
I am testing v-grid inside the polymer-starter-kit and I noticed the v-grid has a z-index of 5 on several regions that cause the grid to fly on top of the polymer-start-kit's headers... Is there some underlying reason for these z-index?
Selectors I found:
.v-grid-tablewrapper.v-grid = 5
.v-grid-scroller.v-grid = 1
.v-grid-header-deco.v-grid = 1
Note: This may be a short coming in Polymer by not defining some clearly delineated z-index boundaries such as Modals should start at: 1000 tooltips: 500 etc etc... but I would hope this could be solved without a basic example the start-kit requiring custom z-indexes for things just to work as expected.
Replacing grid.columns
causes selection column to flex also like other columns (takes more space than necessary). Hovering over the grid fixes the width.
Happens at least in Chrome.
While digging through the build, I noticed that there's no easy way to modify the javascript that actually renders the grid component because the file, VaadinGridImport.nocache.js, appears to be minified. I understand the option to build from source using this repository, but if you're marketing this as a "drag-and-drop" web component for HTML5/Javascript, can the build at least include an un-minified file that allows the developer to minify after they've modified?
containerDiv=$0;
grid = document.createElement("v-grid");Polymer.dom(containerDiv).appendChild(grid);
table = document.createElement("table");Polymer.dom(grid).appendChild(table);
// Headers
colgroup = document.createElement("colgroup");Polymer.dom(table).appendChild(colgroup);
col1 = document.createElement("col");col1.setAttribute("header-text","First column");Polymer.dom(colgroup).appendChild(col1);
col2 = document.createElement("col");col2.setAttribute("header-text","Second column");Polymer.dom(colgroup).appendChild(col2);
// Body
tbody = document.createElement("tbody");Polymer.dom(table).appendChild(tbody);
tr = document.createElement("tr");Polymer.dom(tbody).appendChild(tr);
td1 =document.createElement("td");td1.textContent="One";Polymer.dom(tr).appendChild(td1);
td2 =document.createElement("td");td2.textContent="Two";Polymer.dom(tr).appendChild(td2);
Would expect this to render the grid at http://vaadin.github.io/components-examples/v-grid/columns.html, which is defined in exactly the same way
It does not render anything and class="v-grid-loading"
is never removed from <v-grid>
Additionally, if you run the creation step by step, you will get an exception after creating the colgroup
Uncaught TypeError: Array.prototype.slice called on null or undefined
at getComposedChildren (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:1109:48)
at addToComposedParent (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:1114:16)
at Object.Polymer.DomApi.DomApi.appendChild (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:472:1)
In vaadin-grid.html
the relative path is specified as ../../bower_components/polymer/polymer.html
, which doesn’t work when installed from Bower.
The path should be ../../polymer/polymer.html
.
This probably depends on the packaging script which also does the CDN and ZIP packages.
<v-grid selection-mode='multi' frozen-columns='1'>
<table >
<colgroup>
<col header-text="Name">
<col sortable sort-direction="asc" header-text="Value">
</colgroup>
<tbody>
<tr>
<td>Grid</td>
<td>10000</td>
</tr>
<tr>
<td>Vaadin X</td>
<td>999999</td>
</tr>
</tbody>
</table>
</v-grid>
Initializing the grid with the above will create a <v-grid>
with selection-mode="single"
. If you try to manually change the attribute back to multi
the component goes totally foobar. Removing any of the three (selection mode multi, frozen columns, or sortable columns) from the equation solves the issues.
grid.selectedRows = undefined
ends up with
TypeError: Cannot read property 'length' of undefined at _.setSelectedRows (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid-import.html:408:149) at v-grid.selectedRows (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid.html:320:24)
Instead, I think it should remove the selected-rows
attribute from <v-grid>
Test located here
When I add a text input element into a cell by creating such element and adding it to cell's element in renderer function, that input element cannot keep its focus. Shortly after (almost instantenously) user clicks the input element, it gets stolen, probably by the row selection. The problem persists in all possible selection-modes.
If the horizontal scroll position is > 0, and you toggle the "select all" checkbox, the grid will scroll little by little horizontally all the way to the last column.
Firstly - thank you for this amazing component!
I have a cell renderer which prints a bunch of links using the tag. I wanted to break to a new line after each link but it didn't work. Is this supported?
Upgrading to Polymer 1.0.9 breaks some features.
Uncaught TypeError: Cannot read property 'dispatchEvent' of undefinedPolymer.Async._atEndOfMicrotask @ polymer.html:1085
Uncaught TypeError: Cannot set property 'renderer' of undefined(anonymous function)
By putting flex:1 on a v-grid, it will disappear. the <v-grid>
element itself will have the correct size but within it <div id="measure">
and sibling div containing the table will have zero height. The said div will also have the class name v-grid-loading-data which indicates that something went wrong in initialisation.
<v-grid>
<table>
<colgroup>
<col header-text="First column">
<col header-text="Second column">
</colgroup>
<tbody>
</tbody>
</table>
</v-grid>
Would expect this to render an empty grid with two headers. It renders a horizontal line.
I have a grid which gets pushed data all the time, something like once per two seconds. It is always the same columns and ten rows of data. if I just call grid.data.source = newArray
then the rendering takes 650ms and has deferred calls, which means that it blinks as it first renders a blank version of the grid and then re-adds all the data to it.
The alternative to replacing the array is to manually update the array, here's my code:
if(!grid.data.source){
grid.data.source = newArray
} else {
newArray.forEach(function(point, index){
grid.data.source[index][0] = point[0];
grid.data.source[index][1] = point[1];
});
}
With this code instead the time to rerender goes down to 150ms and and there is no timers causing partial renders, thus no blinking
Issues at hand:
The user should not need to know tricks like this. It is something that the component itself should handle. grid.data.source = newArray
should be just as quick as this workaround.
There shouldn't be timers in the rendering, causing partial renders. I wouldn't have minded the issue so much if the grid wouldn't have blinked all the time when the data changes
Both 650ms and 150ms is quite long times to just update a ten row grid with two text columns with no extra features turned on. My CPU fan starts ramping up when I'm just viewing the view and that has made me consider switching out to a standard html
. Something like 10ms for a case like this is something to reach for.If I have a partially visible grid (which is not focused) in the browser viewport (i.e. the top part visible), a mousedown event on the "select all" checkbox will cause a focus call on the v-grid element, which will make the browsers scroll the element fully into viewport. This makes the subsequent mouseup event miss the "select all" checkbox, and the selection mode is not changed.
The issue was introduced in 7b8c3c5
To reproduce:
gulp verify:bower
downloads a snapshot version, but bower cache isn't automatically cleaned, so the verification tests could be run on an older version.
Gulp should run bower cache clean
using zont/gulp-bower
plugin.
The previously selected row stays highlighted.
A bit related:
The previously selected row makes an un-selection animation, this should originally happen after clicking outside so the animation is too late.
I wanted to try out vaadin-grid inside a Chrome packaged app, but VaadinGridImport.nocache.js attempts to do a document.write (not allowed) which throws an exception and causes everything to break.
Also it modifies document.onbeforeunload, etc, which will also not work.
Also why is this file obfuscated? Is there an un-obfuscated version that I can use easily?
For example,
given we have a <col max-width="100">
in use, and the styles padding-left: 24px
and padding-right: 28px
applied to the column in question using td
, the actual Column width calculated by the Grid is something else than 100px
.
There's a fat chance that the Grid assumes that the padding is 24px
on both sides and bases it's calculations on that.
This is a test, so as we can whether zappier copies issues to trello.
Given I have a <v-grid>
with 3 rows, and I use cell.row.index
:
grid.columns[0].renderer = function(cell) {
// this works properly and renders value 0,1,2 in the column
cell.element.innerHTML = cell.row.index;
cell.element.addEventListener('click', function() {
// this however, will print value 2 on the console on every row
console.log(cell.row.index);
});
};
It seems that both the cell
and cell.row
are actually singletons which results in unexpected side-effects.
Given a <v-grid selected-rows="0"></v-grid>
Removing the attribute from DOM or with JS grid.removeAttribute('selected-rows');
Throws:
Error: Uncaught TypeError: Cannot read property 'split' of null (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid.html:40)
Instead, should set grid.selectedRows
to []
or undefined
Test located here
Given a <v-grid>
with display: none
<v-grid style='display: none'>
<table>
<col header-text='Name'>
<tr>
<td>Grid</td>
</tr>
</table>
</v-grid>
Calling
grid.then(function() {
grid.style.display = 'block';
});
right after loading the component will occasionally result in a race condition with the automatic row height detection and the grid height will be 1px * number of rows.
grid.then
should wait for the row height detection so that we could safely modify the display
attribute.
As a workaround, setTimeout
with 500ms
seems to work.
From: https://vaadin.com/forum#!/thread/10447255
<v-grid id="dataGrid" selection-mode="single" frozen-columns="2">
<table>
<colgroup>
<col header-text="#" width="52">
<col width="60">
<col header-text="First Name" sortable="true">
<col header-text="Last Name">
<col header-text="Email">
<col header-text="Phone">
</colgroup>
<tbody>
<template id="tableData" is="dom-repeat" items="{{data}}">
<tr>
<td>{{index}}</td>
<td>
<paper-icon-button icon="delete" on-click="handleTableClick"></paper-icon-button>
</td>
<td>{{item.name}}</td>
<td>{{item.text}}</td>
<td>{{item.name}}</td>
<td>{{item.text}}</td>
</tr>
</template>
</tbody>
</table>
</v-grid>
The problem is most likely the fact that the on-click handler is lost when we copy the light DOM HTML content into the actual final render tree.
As a workaround, add the paper-icon-button
using a JavaScript renderer:
<script>
// TODO get the correct grid reference
dataGrid.columns[1].renderer = function(cell) {
// Clear any previous elements (you could also re-use the previous paper-icon-button)
cell.element.innerHTML = "";
// Create the paper-icon-button
var button = document.createElement("paper-icon-button");
button.setAttribute("icon", "delete");
// TODO add the correct reference to the click handler
button.addEventListener("click", handleTableClick);
// Add it to the cell
cell.element.appendChild(button);
// Access the row index
// NOTE: see issue #21 (https://github.com/vaadin/components/issues/21)
cell.row.index;
}
</script>
Basically the reused row (checkbox) keeps the style state which is wrong.
This need a very special setting to reproduce:
Result: The DOM elements of the grid are getting frequently and rapidly updated and overload the browser.
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.