adazzle / react-data-grid Goto Github PK
View Code? Open in Web Editor NEWFeature-rich and customizable data grid React component
Home Page: https://adazzle.github.io/react-data-grid/
License: Other
Feature-rich and customizable data grid React component
Home Page: https://adazzle.github.io/react-data-grid/
License: Other
I copied the full featured example, but it throws
Uncaught TypeError: Cannot read property 'setScrollLeft' of undefined
since the getSize
method checks the global Immutable
object:
getSize: function getSize(columns) {
if (Array.isArray(columns)) {
return columns.length;
} else if (typeof Immutable !== 'undefined') {
return columns.size;
}
}
I'm using CommonJS & webpack so the Immutable is not exposed, so that method returns undefined
.
I think for non-array objects, it might be better to directly return the size
property or length
for other array-like objects.
Sometimes a cell editor needs access to additional cell values. Proposing a way for an editor to request these extra values through prop types such that if the prop name exists on the row then it will be passed to the editor from the editor container
var nameEditor = React.createClass({
propTypes : {
firstName: React.PropTypes.string.isRequired,
lastName: React.PropTypes.string.isRequired
}
if firstName and lastName are properties on the row then they will be passed to the editor from the editor container
Cell highlight class should be applied on render not manually to the dom on componentDidUpdate
Also, need to ensure that highlighting can be applied multiple times to the same cell. Currently when a cell has been updated, and the highlight class is applied, subsequent updates to the same cell will have no affect.
The resizable columns example does not work for me?
http://adazzle.github.io/react-data-grid/examples.html#/resizable
Hovering over the column divider in the header does not allow me to resize the columns. Is it done another way?
Currently, when text the text of a cell in React Data Grid becomes too long, it gets truncated and an elipsis is shown. We would like a method to display the full amount of text in a cell if the text is too long.
This could be from either exapanding the height and width of the cell to show the entire content. Or displaying that content in a modal.
Requirements:
render
method of https://github.com/adazzle/react-data-grid/blob/master/src/Cell.js such that it renders an ExpandIcon
React component if the text is truncated.Bonus Points:
Add one of more tests in https://github.com/adazzle/react-data-grid/blob/master/src/Cell.js or on your new component to verify the new functionality
Grouping is a key feature for the grid, and fills a lot of use cases for us. It is also several things to different people. We see this as:
Choose a field (or fields) to group on, and then show the grid with expand and collapse based on this.
Further enhancements include allowing a way to also specify metrics, so that we can display summary info, whether thats number of records, or avg/sum/min/max
Using the same headers, but having expand and collapse on child items
if(row.children) { .. }
)?row.children
should in theory be easy enoughHaving the ability to have master / detail tables, where the subgrid is entirely independent in structure (ie it has different headers, formatters, etc)
In theory this is an extension of child rows, but rather than row.children
we have row.subGrids
or similar
row.children
) and then just sniff if these are rows, or a grid? Or be explicit (row.children
vs row.subGrids
)Thanks for the great work on this component. This is the best editable spreadsheet-like component I've seen so far.
In most spreadsheets (Excel/google spreadsheets), the cells are all editable. Tabbing moves between them, and [Enter] moves to the next row.
In react-data-grid, Enter seems to always toggle cell editing on/off, which feels awkward from a bulk data-entry perspective. Is there some way to have the cells be editable, and [Enter] does the expected thing of moving to the next row?
This page hints at a date column type:
http://adazzle.github.io/react-data-grid/examples.html#/all-the-features
.. but the date column doesn't have a formatter / editor.
Is this something that will be built into future versions, or are users expected to roll their own? If I submit a PR using http://hacker0x01.github.io/react-datepicker/ would that be something you're interested in?
It should not be too hard to support it, even though there are some breaking changes.
https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html
Do we have any function or example how we can have infinite scroll
? And how can we display "There is no content"
if no data is fetch?
Difficulty: Easy
The toolbar should display an indication showing the number of visible rows as well as the total rows count as in the image above.
The ReactDataGrid
component needs to know when the Viewport
is scrolled. It can then update the toolbar with the indexes of the visible rows.
onScroll
event in https://github.com/adazzle/react-data-grid/blob/master/src/Viewport.js#L85 to pass the state.displayStart
and state.displayEnd
properties as parametersReactDataGrid
wrapper componentCreate new functionality in React Data Grid that allows the user to hide a given column by clicking on a drop down menu item of that columns header cell.
onHideColumn
event should be triggered in React Data Grid that should set the modify the state of ReactDataGrid component in https://github.com/adazzle/react-data-grid/blob/master/src/addons/grids/ReactDataGrid.js
to toggle an isVisible property of state.columnMetrics.columnseg, if the second column is hidden, then set this.state.columnMetrics.columns[1].isVisible = false
Write one or more tests in https://github.com/adazzle/react-data-grid/blob/master/src/__tests__/HeaderCell.spec.js
demonstrating this new functionality.
Any questions, PM me on the react data grid slack channel.
var states = ['pending', 'whitelisting', 'completed'];
var DropDownEditor = ReactDataGrid.Editors.DropDownEditor;
var StatesEditor = < DropDownEditor, options={states} />;
var priorities = [{id:0, title : 'Critical'}, {id:1, title : 'High'}, {id:2, title : 'Medium'}, {id:3, title : 'Low'}]
var AutoCompleteEditor = ReactDataGrid.Editors.AutoComplete;
var PrioritiesEditor = < AutoCompleteEditor, options={priorities} />;
Warning: Failed propType: Required prop value
was not specified in EditorContainer
. Check the render method of Cell
.
warning.js:48 Warning: Failed propType: Required prop commit
was not specified in SimpleTextEditor
. Check the render method of EditorContainer
.
Can anyone help me figure out how to access the selected rows? I need to take the selected rows and add them to another table then assign those records to a parent.
I looked in the tests and saw they're accessed via the component's state (component.state.selectedRows
).
How would I do that from the context where I render my ReactDataGrid
(my render
function)? I thought I could use a ref
but ref
is not working because of cloneWithProps
being used in ReactDataGrid, which drops refs
. Any plans to update cloneWithProps
calls to the new cloneElement
any time soon? https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html
I am trying to to see the code for the 'all the features grid'
the site http://adazzle.github.io/react-data-grid/
shows example code for all other variants of the grid .
Can I get the code for that ?
Thanks
How would you use this component for server side generated data?
My webpack build includes a preLoader run through JSCS. It errors out on react-data-grid.js because render() and renderStatusIcon() functions both appear twice in the EditorContainer component (around line 4080). They appear to be identical, so probably no harm other than having lint checkers barf.
When placing a ReactDataGrid element into a div, resizing the screen area (by minimizing then maximizing, or for instance by popping up developers tools and resizing that) the rendered area of the ReactDataGrid will constantly grow horizontally, each time the rendering window size changes.
I have reproduced this behavior using the code from the "Basic Example" provided on the RDG examples page. The behavior presents on both Chrome and Firefox.
Attached is an html file (saved as .txt so I could upload it) called "sizing_test" containing the webpage I used to reproduce the bug. I'm still thinking of a way to create a failing test for this kind of thing, but decided to create the issue with the info I have.
I must be not loading some dependency, but I cannot figure out which one(s) I am missing. Can I get a nudge on which dependencies am I missing?
I've seen someone had raised this issue several months ago and the author had closed the issue. But I still can't see the code right now. Thanks for assistance.
I had a case where I needed to access others row values inside a cell formatter. Maybe be worth documenting it ?
This is how I achieved it.
let columns = [
...
{
key: 'mykey',
name: 'My Column',
formatter: Formatters.myFormatter,
getRowMetaData: (row) => row
}
...
];
In into my formatter I can access all the row values into this.props.dependentValues
setting column.hidden
should not render that column
Is it possible to change the line color for the table?
Sorry I opened an issue on the wrong repo. Unfortunately I cannot remove it.
Firstly: react-data-grid looks great !
I'm trying to render a bootstrap dropdown button (using react-bootstrap) in a cell. The button renders ok, but the dropdown menu doesn't display though. I guess my css foo isn't up to scratch. Any ideas on how I can bring the dropdown menu to display ?
cheers
Magnus
It doesn't seem registered at the moment:
bower install --save react-data-grid
bower ENOTFOUND Package react-data-grid not found
Installing with bower install adazzle/react-data-grid --save
also does not work, the src files are ignored.
Hi,
I am using ‘react-data-grid’ component in my application, but when component is rendered at first time it won’t get display on window and when I open developer tool bar then component is working fine.
Please let us know your opinion on the same.
render:function(i)
{
var rowGetter = function(i){
return _rows[i];
};
return(
My component tag is as below.
);
}
Thanks in advance.
Regards,
Shekhar
After doing an npm install
with the either 0.13.1-flow-osx673
(the current latest in npm), or 0.13.1
, the following files have debugger;
statements in the dist. See the first lines of HeaderCell.render()
node_modules/react-data-grid/dist/react-data-grid.js
node_modules/react-data-grid/dist/react-data-grid-with-addons.js
Source link: https://github.com/adazzle/react-data-grid/blob/master/src/HeaderCell.js#L27
Currently if an empty array of rows are provided to the grid, the grid will display an empty viewport. It should be possible to pass an EmptyRowView
as props to ReactDataGrid that gets rendered if an empty array of rows is passed to ReactDataGrid
Write a test to show the new funcionality
I'm attempting to use the grid as an interactive view into a database, allowing the user to edit/add entries by directly editing cells in the grid. However, I'm getting some strange behaviour apparently dependent on the key that is used to complete the edit:
Simply clicking away from the cell works fine.
Pressing 'Enter' fires two copies of the update event (this is an issue due to the asynchronicity making catching "repeat" events almost impossible)
Pressing 'Tab' fires two events AND fails to re-render the grid/cell (refocusing makes it show the correct info)
Using the arrow keys presents the same issues as the 'Tab' key.
Is there some particular part of the grid definition I might be doing wrong that could cause these errors? Or is there any other advice/help to offer?
I can't seem to attach a .txt of the code file ("something went really wrong"...), so here is the part defining the grid:
var DataGrid = React.createClass({
getInitialState: function()
{
console.log("Getting initial state");
var rows = getRows();
//setGrid(this);
return {rows : rows};
},
rowGetter: function(rowIdx)
{
return this.state.rows[rowIdx];
},
handleRowUpdated: function(e)
{
if(this.state.rows[e.rowIdx][e.cellKey] != e.updated[e.cellKey]/* && e.key == 'Enter'*/)
{//table doesn't seem to update properly (though using forceUpdate below...) if the user
//uses a key other than "Enter". Using Tab or the arrow keys doesn't do it.
//The database updates, but the shown data doesn't change - refocusing on the element
//changes it. For now, restricting to the "Enter" key.
console.log(JSON.stringify("Last Event is: " + this.state.lastEvent));
console.log(JSON.stringify(e));
console.log(JSON.stringify(e) == JSON.stringify(this.state.lastEvent));
this.setState({lastEvent: e});
var boxNumber = this.state.rows[e.rowIdx]['box_num'];
var key = e.cellKey;
var data = e.updated[e.cellKey];
var sendString = '{"key":"' + key + '", "data":"' + data + '"}';
e.boxNumber = boxNumber;
console.log("Sending: " + sendString);
jQuery.ajax({
url: ("/CollectionBox/edit/" + boxNumber),
type: 'POST',
dataType: 'text',
data: sendString,
success: function(rMessage)
{
changeNotice(rMessage);
if(rMessage[0] == 'S') //"[S]uccess"
{
var event = dataGrid.state.lastEvent;
var boxNum = event.boxNumber;
var key = event.cellKey;
changeRow = _rows.filter(function ( obj ) { return obj.box_num == boxNum })[0];
//console.log("We will be changing this row: " + JSON.stringify(changeRow));
//console.log(key + ":" + changeRow[key] + " will become " + key + ":" + event.updated[key]);
dataGrid.state.rows[event.rowIdx][event.cellKey] = event.updated[event.cellKey];
dataGrid.forceUpdate(); //would like to replace forceUpdate
}
console.log(rMessage);
}
});
}
},
handleGridSort: function(sortColumn, sortDirection)
{
var comparer = function(a, b)
{
if(sortDirection === 'ASC')
return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
else if (sortDirection === 'DESC')
return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
}
var rows = sortDirection === 'NONE' ? this.state.rows.slice(0) : this.state.rows.sort(comparer);
this.setState({rows : rows});
//renderGrid();
},
render: function() {
return ();
}
});
npm install --save react-data-grid
on a fresh project currently pulls in version 0.13.1-flow-osx673
.
https://www.npmjs.com/package/react-data-grid See sidebar: '0.13.1-flow-osx673 is the latest of 42 releases'.
First I wonder if that's intentional... people trying out this library for the first time using the normal npm install are getting a broken version. (I'll post another issue, but this build still has loads of issues running on React 0.13, and even includes a 'debugger' statement in HeaderCell.render().)
Getting to this specific issue... npm install
downloads code directly from github for facebook/flow without going through NPM.
> [email protected] postinstall /Users/_hidden_/node_modules/react-data-grid/node_modules/gulp-flowtype/node_modules/flow-bin
> node lib/install.js
fetch : https://github.com/facebook/flow/releases/download/v0.13.1/flow-osx-v0.13.1.zip
progress : [====================] 100% 0.0s
✔ flow binary test passed successfully
I'm guessing this is by design and based on limitation of availability of flow, but I'm hoping this is a temporary change.
This will most likely prevent me from using react-data-grid inside my company because we need to control/archive/audit the code that is getting used in any given build. It's fine for my POC and development work, but if I push a project with react-data-grid as a dependency and it runs on our production build servers, and it's pulling in random code from the internet at that time, the build will get blocked. (Dependencies pulled via NPM can be easily archived and audited on our internal NPM/Nexus repo).
If I may... I encourage you to stick with npm-only downloads in the build process.
Is this install.js-based dependency going to stick around?
-Thanks
Not sure whether this would be an enhancement you would consider but it might be beneficial to use a little bit more of functions and attributes rather then objects and properties.
I am just evaluating this together with facebook's fixed-data-table - and fb's table (while having less features than react-data-grid) works perfectly in this regards, it just requires functions where a function is needed (cell renders aka formatters, cell data getters etc.) and expects necessary data to be passed as such function's arguments (which makes such function's use quite self-explanatory).
React-data-grid on the other hand (while having much more features) seems to expect everything to be an object that has functions (with no attributes) that are supposed to access object's properties that were somehow (miraculously) set before.
I am trying to use react-data-grid from a functional language (clojurescript) and pretty much I just have to resort to writing js code quite often whereas with fixed-data-table there are no issues.
Apologies if I misunderstood the concept (I am new to react-data-grid) or am missing something. Basically what I am trying to understand is follows - what are the benefits of using this design:
//Custom Formatter component
var PercentCompleteFormatter = React.createClass({
render:function(){
var percentComplete = this.props.value + '%';
return (
<div className="progress" style={{marginTop:'20px'}}>
<div className="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width:percentComplete}}>
{percentComplete}
</div>
</div>);
}
});
as opposed to this design (e.g. used by fixed-data-table):
The cell renderer that returns React-renderable content for table cell.
cellRenderer
function(
cellData: any,
cellDataKey: string,
rowData: object,
rowIndex: number,
columnData: any,
width: number
): ?$jsx
type: func
set enableCellSelect={true}, need to click twice to come into force the onSelect function.
Implement column header dragging to reorder a column
HeaderRow
, and Header
components, and finally trigger an onColumnReorder event in ReactDataGrid
component which will modify the order of state.columnMetrics.column
. Alternatively you could try implementing a drag and drop library like http://gaearon.github.io/react-dnd/I dont know if this is possible right now but according to documentation there is still no way how I could add classNames or styles by columns.
Currently what I could do is to create a custom formatter, however it will be much more easy if we could add classNames
upon declaration.
In example:
//Columns definition
var columns = [
{
key: 'id',
name: 'ID',
locked : true,
classNames: 'center'
},
{
key: 'task',
name: 'Title',
width: 200
}
This project relies on Immutable
being globally available. Are there any plans on adding it as a dependency so you don't have to attach Immutable
to window
or global
? Specifically these checks are causing problems:
typeof Immutable !== 'undefined'
Thanks!
My datagrid does not render, with error:
Code:
<ReactDataGrid
columns={[
{'key': 'rating', 'name': 'Rating', 'formatter': PercentageFormatter},
{'key': 'name', 'name': 'Name', 'editable': true, 'width': 400},
{'key': 'count_songs', 'name': '# Songs', 'width': 100}
]}
rowGetter={this.rowGetter}
rowsCount={this.state.lib_albums.length}
enableCellSelect={true}
onRowUpdated={this.onRowUpdated} />
screencast - http://screencast.com/t/7atVpSPV
is there currently a feature to export to excel or pdf? if not, can you give me some pointers as to which are the best practices for implementing such a feature? i'd like to contribute by incorporating those features in to this project.
Currently, coverage reports are only being generated for files that have been required in tests. This gives a misleading representation for the amount of code actually covered. Need to require all files in solution in test/index.jsx and then work on increasing the code coverage to a reliable level
I use the version: "0.13.0-alpha1" and webpack
it report the error:
ERROR in ./~/react-data-grid/dist/react-data-grid-with-addons.js
Module parse failed: \node_modules\react-data-grid\dist\react-data-grid-with-addons.js Line 4078: Duplicate data property in object literal not al
lowed in strict mode
You may need an appropriate loader to handle this file type.
| return React.createElement('span', { className: 'glyphicon glyphicon-remove form-control-feedback' });
| }
I check the code in dist/react-data-grid-with-addons.js
these two function duplicate:
render()
renderStatusIcon()
then I remove it, and webpack ok
something wrong?
When you set enableRowSelect
to true a select column is prepended to the the columns stored in state. However the columns that are stored in props remain the same.
Having the props columns being different than the state columns causes the idx
to be off by one. This makes getting the last column return undefined
for this line.
var col = this.getColumn(this.props.columns, idx);
This issue can also be found on the examples page. If try to edit the furthest right column you can see an exception thrown in the console. http://adazzle.github.io/react-data-grid/examples.html#/all-features-immutable.
There are two places with logic to deal with a new row:
Lines 160 to 162 in e6af225
react-data-grid/src/addons/grids/ReactDataGrid.js
Lines 115 to 117 in e6af225
However, this means that modifying the grid data using an external menu (eg. show / hide rows), or updating the grid data periodically can trigger this behaviour.
Is there another way to tag that row has been specifically added, rather than just a change in the row count?
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.