griddlegriddle / griddle Goto Github PK
View Code? Open in Web Editor NEWSimple Grid Component written in React
Home Page: http://griddlegriddle.github.io/Griddle/
License: MIT License
Simple Grid Component written in React
Home Page: http://griddlegriddle.github.io/Griddle/
License: MIT License
Hi,
I was trying out the demoes on http://dynamictyped.github.io/Griddle/ and realised that the filter input does not work on Safari Mac (v7.0.6).
I've tried it on Chrome Mac and it works like a charm.
Great work on the component; will be watching this for awhile =)
Currently we are using a callback to pull data from another location when a user filters / clicks next/previous, etc. I'm proposing that Griddle would have a set of properties that would be passed in by a parent component instead of the callback that exists today (the callback would likely be there for a bit and it would toss a deprecated warning to the console). There would be guidance on how the parent component should be structured but the details would be up to the implementer (aka jQuery/reqwest/flux/etc).
Basic Example:
var SomeGridWrapperComponent: function(){
setFilter: function(filter){
//get the filtered result set from the server
...
},
getPage: function(number){
//get a specific page of data -- next/previous/jump to page all call this
...
},
...
render: function(){
return <Griddle currentResults={someData} currentPage={someNumber} maxPage={someNumber} setFilter={setFilter} getPage={getPage} changeSort={changeSort} ... />
}
}
The current results (the data for the current page), the number of the current page and the max page would be passed to Griddle as well as the sorting, change page, change filter functions (the methods that would get data from another location).
Griddle would be modified to use the external methods if they are available or use the current methods that perform the paging / sorting / etc against a local dataset (like most of the examples today where the full set is passed into Griddle) if they are not.
This used to work but now columns aren't filtered by default when setting the columns property and using external data loading. It seems the only code path that sets the filteredColumns when using external data is in setMaxPage. Could this be set by default somewhere?
Hi, thanks for your component. Is there any way Griddle could render results more than once, so we can follow React examples and simply make the ajax call ourselves when our component mounts and then update our setState() thereby passing updated 'results' property to your Griddle component?
This is the basic code I'd like to be able to work with Griddle, which follow React examples of how to do things
var MusingsSearchResults = React.createClass({
getInitialState: function() {
return {musings: []};
},
componentDidMount: function() {
this.loadMusingsFromServer(); //doesn't work out, because Griddle 'results' property must be populated ahead of time
setInterval(this.loadMusingsFromServer,5000); //could even try to poll
},
loadMusingsFromServer: function() {
debugger;
$.ajax({
url: 'musings.json',
dataType: 'json',
success: function(data) {
this.setState({musings: data});
}.bind(this),
error: function(xhr, status,err) {
console.error(xhr, status, err.toString());
}.bind(this)
});
},
render: function() {
return <Griddle results={this.state.musings} tableClassName="table"/>;
}
});
var fakeDataMethod = function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
// Load results from your API here.
callback(function() {
results: [],
totalResults: 300
});
}
For example, this works for me:
loadItUp: function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
$.ajax({
url: 'musings.json',
dataType: 'json',
success: function(data) {
callback({
results: data,
totalResults: data.length
});
}.bind(this),
error: function(xhr, status,err) {
console.error(xhr, status, err.toString());
}.bind(this)
});
},
render: function() {
//return <Griddle results={this.state.musings} tableClassName="table"/>;
return <Griddle getExternalResults={this.loadItUp} tableClassName="table"/>;
}
Thanks again! (Note maybe I have React misunderstood, but I think components' render should be able to handle props updates. And I can't think of how to call render the very first time with async ajax callback data already provided.)
-First time poster on GitHub (unsure how to find responses, so I'll check back for issue comments)
Go to the demo page and open your web inspector. You'll see many messages like this one:
Each child in an array should have a unique "key" prop. Check the render method of GridTitle. See http://fb.me/react-warning-keys for more information.
You could totally use the "id" from the fakeData rows to identify which row is which. And the column name would work for the columns.
You should still be able to access the attributes if the visibility is set to valse.
Similar to issues #32 and #16 I would like to be able to modify the column header. Specifically, I would like to be able to add React-Bootstrap tooltips to my column headers. So when you hover over a column header it explains in more detail what that header means.
Related to this is being able to have a column header reference name that is different than the text that is displayed there. For example, is it possible to have a column named something like Order Number
but internally it is referred to as OrderNum
? Or maybe you make your site international and use the text Número de orden
for Spanish speakers, but I want to be able to write code that just references a single variable name.
The place where I'm currently experiencing some amount of nuisance with this, is when external results gets sorted. I have to convert Count
to NumSystems
on my server for the code shown here: https://github.com/DynamicTyped/Griddle/issues/14#issuecomment-64094434
If I then decide to rename it on the front-end to Number of Systems
, I'll have to make another change on my server. I would prefer not to have to make changes to my server when I only change some text on my front-end.
This is sort of two issues, but very related as it all comes down to wanting to modify what is shown for my column header, and wanting to be able to reference that column using a different name.
Currently I cannot find how to allow for a single cell in the grid to have custom HTML. The basic example would be, having the text in a cell be a link which gets its href value from another value in the data coming in.
Is this currently possible?
Did you consider to replace underscore with a custom Lo-Dash build in order to reduce the size of your component?
There is a bug when you filter and then change the number of rows per page for the example. It seems to forget the filter when working out how many pages there are, and what fits on each page, but it only displays things that match the filter.
The 'row' class that is added to the GridFilter's rendered element is unfortunate IMHO. In my case, I use Bootstrap as CSS framework, and the 'row' class is part of Bootstrap's grid system. Having this class on the filter-container will therefore conflict with my grid-setup.
This class ought to not be there when using useGriddleStyles=false, in my opinion.
I have dealt with this temporarily by manually removing the class upon component mount:
componentDidMount: function () {
$(this.getDOMNode()).find('.filter-container').removeClass('row');
}
Hi,
I really like Griddle but I would like to implement a simple CRUD interface. It would help me if I could set a callback if I click on the cell. returning cell and row information (so I can open a modal or something else for update or delete).
Is there any interest to support that ? I can help with dev (I am a newbie in JS but I am willing to help and write tests for it)
When I use the new GriddleWithCallback from the ver0.2.0 branch and click "Next" or choose the page number from the drop down, I get the following error in Chrome:
Uncaught ReferenceError: setDefault is not definedGriddleWithCallback.jsx.js:56
React.createClass.setPageGriddle.jsx.js:152
React.createClass.setPageGriddle.jsx.js:208
React.createClass.nextPageEventPluginUtils.js:111
executeDispatchSimpleEventPlugin.js:306
SimpleEventPlugin.executeDispatchEventPluginUtils.js:99
forEachEventDispatchEventPluginUtils.js:120
executeDispatchesInOrderEventPluginHub.js:47
executeDispatchesAndReleaseforEachAccumulated.js:25
forEachAccumulatedEventPluginHub.js:252
EventPluginHub.processEventQueueReactEventEmitterMixin.js:18
runEventQueueInBatchReactEventEmitterMixin.js:44
ReactEventEmitterMixin.handleTopLevelReactEventListener.js:80
handleTopLevelImplTransaction.js:135
Mixin.performReactDefaultBatchingStrategy.js:66
ReactDefaultBatchingStrategy.batchedUpdatesReactUpdates.js:110
batchedUpdatesReactEventListener.js:175
ReactEventListener.dispatchEvent
It would be really helpful to have only certain columns be sortable. I'm thinking this should be a property in columnMetadata items:
[
{
"columnName": "name",
"sortable": false,
"displayName": "Name"
},
{
"columnName": "location",
"sortable": true,
"displayName": "Location"
},
...
]
Currently, if you're using a custom row component the filter will not match the text inside nested elements. It would be nice if we could match text a few levels down. Happy to submit a PR for this.
Hi! First off; thanks for this library- and its ease of use. Nice to see good documentation, especially with lots of examples.
I see that the 'sortable' parameter for columnMetaData has gotten into the code, but it's still not documented.
I'd love to see a boolean parameter (t.ex. 'filterable'), which excludes/includes that particular column when performing filtering.
Would be great to have an option to provide custom filter function.
I've got a React 0.12.1 project. I tried adding Griddle and started getting an exception in ReactMount.js: Uncaught TypeError: Cannot read property 'firstChild' of undefined
Any thoughts on why this is happening? Some googling says this can happen when the React script is included twice, but I'm using webpack and requiring React. Haven't had a problem like this with any other modules.
Thanks,
Tom
While Griddle works without Bootstrap, there are a couple references to Bootstrap classes in the code. Griddle should continue to work with Bootstrap but not reference any of its classes without the implementer stating to do so.
Small example:
React.render(
React.createElement(Griddle,
{showSettings: true
, columnMetadata: [
{columnName: "foo"
, "visible": true
, customComponent: React.createClass({
render: function() {
return React.createElement("div", null, "foo: ", this.props.data, " bar: ", this.props.rowData.bar);
}})}
, {columnName: "bar"
, "visible": true}]
, results: [{foo: "foo", bar: "bar"}]})
, document.body)
Column foo
contains the value foo: foo bar: bar
. Now go to Settings and hide bar
. Back in foo we see foo: foo bar:
. That is, the value this.props.rowData.bar
is no longer available.
The first thing I tried with Griddle was displaying objects where to fields in the object combine into one display cell. Hence I found this.
Is there support for server side paging? I can't load all my data to {results} at once.
The docs site should contain more examples and how-to information. Additionally, it shouldn't necessarily be entirely on one page.
My expectation is that if I set initialSort, then when the request is made for external results (via getExternalResults), it will set this as the sortColumn, and additionally I expect to see a arrow on the column specified. Unfortunately, it seems to have no effect at all when requesting external data.
If visited via https, the scripts loaded via http fail to load and most of the demos are silently missing.
Right now there's 0.1.19 and 0.1.18, would you consider tagging them? Thanks!
Therefore steps from README
npm install -g grunt-cli
npm install
grunt
Do not work.
Hey guys,
I think I spotted a new issue. In my code base the filter functionality in combination with getExternalResults does not work anymore. I also checked the example page and it fails there as well.
Hope you can get that fixed soon!
And once more, thanks for your work!
Jan
I tried upgrading to the latest code today, so perhaps I've broken something in my build process along the way, but it seems that just running "npm install" with griddle-react in my packages.json file for my project was not enough. I needed to cd into ./node_modules/griddle-react/ and run "grunt react" in order to get the modules directory that is pointed at by your packages.json file. Until I did this, I was getting the error
[15:11:40] Running 'browserify'...
[15:11:40] Errored 'browserify' in 9.86 ms Cannot find module 'griddle-react'
module.js:338
throw err;
^
Error: Cannot find module 'griddle-react'
I don't know if you previously included your modules directory in git, or maybe I broke something on my end with my build process (if you have any thoughts on what I need to do to have that modules directory automatically built when I run "npm install", I'm interested). I am new to front end development, so I apologize for all my issues, but thank you very much for making the fixes and for creating griddle!
The JSX pragma is no longer required in React 0.12 and should be removed, since they serve no purpose. Looks like you guys have "React" required everywhere necessary, so the removal should be clean.
When I try the following:
React.render(React.createElement(Griddle, {columnMetadata: [{order: 2, columnName: "foo", visible: true, displayName: "FOO"}, {order: 1, columnName: "bar", visible: false, displayName: "BAR"}], results: [{foo: "foo", bar: "bar"}, {foo: "123", bar: "456"}]}), document.body)
displayName
and order
attributes are respected but visible
is ignored.
In addition to being able to specify which column is initially used for sorting, I would also like to be able to specify which direction it is sorted (ascending or descending). The call to getExternalResults
provides both a sortColumn
and a sortAscending
, but the griddle declaration provides only an initialSort
. I would additionally like an initialSortAscending
value (or some other name or means of doing this) that allows me specify the initial sort direction.
Thanks for this amazing component!
I've been using this in my project, but in some case there might be no data available in the table.
The GridNoData
component seems handy but unfortunately there's no way I could style it, so I was thinking if we could add something like no-data
class to the div
?
In order to use the ver0.2.0
branch with the GriddleWithCallback
component, I needed to edit package.json
to use the line: "main": "./modules/main.js",
Then I created the ./modules/main.js
file with the contents:
module.exports = {
Griddle: require('./Griddle.jsx.js'),
GriddleWithCallback: require('./GriddleWithCallback.jsx.js')
};
I tried using the GriddleWithCallback
component as shown in index2.html
but it is missing many of the original variables of a normal Griddle
component, such as being able to set showFilter
to false
.
Using the current (master) branch, I am able to choose a noDataMessage
message. This message is displayed both while data is being loaded (if my server takes a long time to supply the external results), and if there are actually no results. So I'm stuck having to decide to use "Loading..." or "No data available" as my noDataMessage
. I think this may be fixed in ver0.2.0
via loadingComponent
, but I just want to ensure that will be possible then.
Your example page shows the following warnings in the console:
Each child in an array should have a unique "key" prop. Check the render method of GridTitle. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of GridBody. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of GridRowContainer. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of GridRow. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of GridPagination. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of CustomFormatContainer. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of OtherPager. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Each child in an array should have a unique "key" prop. Check the render method of GridSettings. See http://fb.me/react-warning-keys for more information. 851539_1533162923591765_727898294_n.js:9663
Warning: Unknown DOM property class. Did you mean className? 851539_1533162923591765_727898294_n.js:18087
Warning: Unknown DOM property for. Did you mean htmlFor? 851539_1533162923591765_727898294_n.js:18087
Storing results in state and then changing state doesn't seem to update the table, as in:
var TestTable = React.createClass({...
getInitialState: function() {
return {
test: [{name:"foo"}]
};
},
test: function(event) {
this.setState(
{test: [{name:"bar"}]}
);
},
render: function() {
return (
<Griddle
results={this.state.test}
/>
<button onChange="this.test">
)})}
Fiddle: http://jsfiddle.net/q3cbf3qa/2/
When adding a filter and then deleting it, it doesn't look like the filter is updated once the last character is removed. One will be unable to reset the grid to an unfiltered state after filtering.
If a grid is given a columns object and a columnMetadata object, then currently the columnMetadata object needs to have an item for every column listed in the columns object. It would be nice if the columnsMetadata object would only need to be populated with objects that need non-standard formatting.
The tbody
element should group 1 or more similar tr
s together. It is less helpful when each tr
has it's own tbody
.
From the spec:
Use multiple tbody sections when rules are needed between groups of table rows.
I replicated the Star Wars API example found in the External Data section of the documentation to test out the Infinite Scroll functionality. Upon adding the option enableInfiniteScroll={true}
, the component begins to auto-cycle through each "page" until it hits the end. It does not seem to attach additional results to the existing results, nor does it seem to allow the user to trigger new results to be loaded upon scrolling.
Can you please clarify if there are additional changes/options that need to be added to correctly enable infinite scrolling?
In the example shown http://dynamictyped.github.io/Griddle/ when you open the dev tools in chrome and enter something in the filter you see error Uncaught TypeError: Cannot read property 'componentWillUpdate' of null
Hi,
first of all, cool work you have done. It was easy to integrate into my existing react project.
But I would like to feed a javascript array instead of a json array into to the result prop of Griddle.
Is it possible?
Kind Regards
Jan
I'm evaluating react grids for an app which requires IE8 minimum support. IE8 barfs on the demo page. I might try to see how much of a rabbit hole this fix would be and make a pull request.
Sorry Guys to bother you again.
In my project, I would like to make extra data available to the custom component of the grid. So, I was trying to make use of the new rowData prop.
But unfortunately I have no clue where to set it. I tried to put it in < Griddle />, but no success.
Could you help me out another time?
Many thanks in advance!
Best Regards
Jan
When I npm install it, it doesn't actually install a valid node module that I can require
.
It appears that the reference to this.titleStyles
in the gridTitle.jsx
file is not defined:
https://github.com/DynamicTyped/Griddle/blob/abd9319aa1bbab8c3edca0073dbb00c4a7e18858/scripts/gridTitle.jsx#L82
I'm wondering if this was intended to be a prop or possibly a computed value that just was never set. Right now it's just set to class="undefined"
once rendered.
My proposal would be to create a tableHeaderClassName
prop that can be passed into <Griddle>
so that we are able to override the default table header row class. Perhaps also a tableHeaderStyles
as well for those that like inline styles.
I am pulling external data by setting "getExternalResults", and when I select a different "Rows per page" value (such as going from 5 to 25), the table does not update until I click Next", "Previous", or select a new page from the dropdown.
I think it would be a nice feature if the grid had a tool bar and allowed the users to select rows.
Apologies if I missed this in the documentation but I'd like a way to have events when rows are interacted with. Namely if they are clicked or hovered over. Is this doable? Thanks!
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.