griddlegriddle / griddle

Simple Grid Component written in React

Griddle

Needs more maintainers - Please see this issue

An ultra customizable datagrid component for React

---

Please check out the documentation and examples.

TLDR: Griddle now has a customizable architecture that allows for one-off customizations or reusable plugins. These customization options allow for overriding everything from components, to internal datagrid state management, and more.

---

To use Griddle:

npm install griddle-react

---

To run from source:

1. npm install
2. npm run storybook

---

Issues:

If you run into an issue in Griddle please let us know through the issue tracker. It is incredibly helpful if you create a failing test(s) and/or a storybook story that demonstrates the issue as a pull request and reference this pull request in the issue. To add a storybook story, navigate to /stories/index.js and add a story to the storiesOf('Bug fixes' ...) section.

Contributing:

Please feel free submit any bugs. Any questions should go in the Gitter chat channel or stackoverflow. Pull requests are welcome but if you have an idea please post as an issue first to make sure everyone is on the same-page (and to help avoid duplicate work). If you are looking to help out but don't know where to start, please take a look at approved issues that don't have anyone assigned.

We do most of our initial feature development in the Storybook stories contained in this project. When you run npm run storybook, a web server is setup that quickly provides access to Griddle in various states. All storybook stories are currently in /stories/index.js

We would love any help at all but want to call out the following things:

• Help maintaining 0.x
• More tests - we have a number of tests in version 1.0 but not quite where we'd like it to be
• More plugins

griddle's Issues

GriddleWithCallback from ver0.2.0 change page broken

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

Custom filter function.

Would be great to have an option to provide custom filter function.

Add release tags

Right now there's 0.1.19 and 0.1.18, would you consider tagging them? Thanks!

Why thead and tbody in different tables?

Why thead and tbody in different tables?

What should I do if I don't want have sorting by clicking on headers, but want to have correct width of all columns in tbody and theader?

Better Docs site

The docs site should contain more examples and how-to information. Additionally, it shouldn't necessarily be entirely on one page.

Modify how external results are loaded

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.

Add 'filterable' parameter to columnMetaData

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.

Remove 'row' class from filter-container when using useGriddleStyles=false

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');
    }

define initialSortAscending

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.

key warnings

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

include modules directory in git

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!

Toolbar and make it possible to select rows

I think it would be a nice feature if the grid had a tool bar and allowed the users to select rows.

Issue updating table results from ajax, and incorrect example

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?

1. Currently when I try this (and let's say I even try to poll the server for new results every X seconds), Griddle will not re-render (as I see in the code it only cares about props.results in the original getInitialState call.

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"/>;
  }  
});

2. I do see getExternalResults, though I don't need paging or filter... just ability to easily feed results from my ajax call (which I may want to poll every X seconds). I did notice this fyi: I think the callback example at http://dynamictyped.github.io/Griddle/ is not supposed to pass a function, just the results and totalResults?

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)

use of javascript object array instead of json array

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

Remove reference to Bootstrap

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.

Loading message

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.

Grid table header class not working

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.

filteredColumns not set with external data and this.props.columns

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?

'getExternalResults' doesn't reload data after the last character in a filter is deleted

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.

Docs page should use `//` rather than `http://` for external resources

If visited via https, the scripts loaded via http fail to load and most of the demos are silently missing.

Example not working in Chrome with dev tools open - Uncaught TypeError: Cannot read property 'componentWillUpdate' of null

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

Setting "visible" to false in metadata object removes it from rowData

You should still be able to access the attributes if the visibility is set to valse.

Changing state results does not update the table.

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">
)})}

Each row shouldn't have it's own `tbody`

The tbody element should group 1 or more similar trs 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.

Filter with getExternalResults() does not work anymore.

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

Gruntfile.js is ignored in .npmignore

Therefore steps from README

npm install -g grunt-cli
npm install
grunt

Do not work.

Filter input does not work on Safari Mac 7.0.6

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 =)

Selecting new "Rows per page" value does not update table when using external data source

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.

Replace underscore dependency with lodash custom build

Did you consider to replace underscore with a custom Lo-Dash build in order to reduce the size of your component?

• Custom Lo-Dash builds
• Lo-Dash functions as npm packages

Setting column visibility has no effect

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.

[Enhancement] Add row or cell callback onClick event.

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)

Where to set rowData prop?

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

Ability to selectively enable/disable sort for certain columns

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"
  },
  ...
]

server side pagination

Is there support for server side paging? I can't load all my data to {results} at once.

Adding enableInfiniteScroll={true} breaks example.

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?

As soon as I add Griddle, I get: Uncaught TypeError: Cannot read property 'firstChild' of undefined

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

Allow Columns to be treated as default when not specified in metadata

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.

IE8 support

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.

Row events

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!

Can I Browserify this?

When I npm install it, it doesn't actually install a valid node module that I can require.

GriddleWithCallback from ver0.2.0

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.

Repeated elements need unique keys

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.

Usage of unneeded JSX pragma

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.

Bug when filter then change rows per page

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.

initialSort no effect on external results

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.

Custom Cell Markup

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?

Make filter queries search throw nested divs for custom components

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.

add a class to no-data GridNoData?

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?

Custom column headers

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.

Toggling visibility in Settings removes the value from rowData

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.