Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info

@dahlbyk , how would one go for reordering rows with react-dnd?
I have found some information that there's something like customTableRowComponent, but no further information.

Such functionality would require having a custom row element. Is this possible?

Hi guys, I'm trying to upgrade from 0.x to 1.11, and am trying to find a good practical example of using it with nested rows and row onClick events. any suggestions?
Roberto Bouza
Hello. I'm looking into how to access nested data in a custom component. It looks like the objects gets converted into something else.
e.g. data looks like: data = [{item1: a, item2: [{a:1, b:2}, {a:2,b:6}]}, {item1: b, item2: [{a:4, b:6}, {a:0, b:0}]}]
item1, item2 are columns. item2 has a customcolumn to handle the visualization part. But it gets converted into a Map is that expected?
Keith Dahlby

@bouzafr Griddle internal state uses ImmutableJS, including data, and we don't convert back to plain JS before assigning value that's passed through to custom components (https://github.com/GriddleGriddle/Griddle/blob/e0384403ae3997543c13cd5e41aeb54e151ddbbf/src/selectors/dataSelectors.js#L268-L278). See GriddleGriddle/Griddle#773 for some related discussion. I generally agree that converting back to JS would be a better experience, but that's a breaking change.

If you don't want your presentation component to know about ImmutableJS, two options come to mind:
1) provide your own CellContainer that's basically identical to the existing one but using a different cellValueSelector
2) write a higher-order component to wrap your plain component, e.g.

const valueToJS =
  OriginalComponent =>
    ({ value, ...otherProps }) => (
      <OriginalComponent value={Iterable.isIterable(value) ? value.toJS() : value} {...otherProps} />

  <ColumnDefinition id="item2" customComponent={valueToJS(myCustomComponent)} />
Roberto Bouza
Thanks @dahlbyk
Hey, anyone who knows if it's possible to add fixed headers / columns on griddle table?
Klevis Cipi
Hello, some have used infinite scroll with Griddle table ?
Chris Ortman
Is it possible to install griddle from a github url? I am trying to get yarn to install griddle from the tip of master because it has a fix for ColumnDefinition propTypes but when I do that jest stops being able to find griddle-react
The directory structure in node_modules is different if I install 1.11.2 or GriddleGriddle/Griddle .. 1.11.2 has a dist folder, master has a src
Keith Dahlby
@chrisortman correct, there's a build step that produces dist/. It looks like as of npm@5 we just need to rename build to prepare: https://github.com/npm/npm/issues/3055#issuecomment-304698029
Keith Dahlby
@kleviscipi the included PositionPlugin uses scrolling instead of pagination, but it requires pre-loading all data and using LocalPlugin. There has been recent chatter about implementing non-local infinite scroll in GriddleGriddle/Griddle#582 and GriddleGriddle/Griddle#795.
@ahennie I don't know of anyone who has implemented a plugin for fixed headers/columns, but all the hooks one would need should be available. It's a pretty frequent request, so I imagine we would be glad to include it in the main project, but the contributors haven't had time to implement it ourselves.
Chris Ortman
Thanks @dahlbyk
Klevis Cipi
@dahlbyk Thank you,i have used an another component for scrolling vertical
Nathan Harvey
Clicking on the header of this chat sends me to https://github.com/DynamicTyped/Griddle. I think it should go to https://github.com/GriddleGriddle/Griddle instead.
Keith Dahlby
@Narvey I don't think we can change that without somehow migrating this chat room to the GriddleGriddle organization
Ryan Lanciaux
Yea - unfortunately Griddle started under a different org and I didn't know that it made sense to try to get everyone in the channel to move.
Hello. Has anyone seen this error when running storybook? Module not found: Error: Cannot resolve 'file' or 'directory' ../stories. @ ./.storybook/config.js 6:2-23
hi all, is it possible to have a card list and have the sorting functionality in another div?
basically being able to place a button to sort data in my table, instead of it having to be in the first row (titles)
charith sooriyaarachchi
Hello is anyone getting the error 'Unhandled promise rejection TypeError: this.props.externalSetFilter ' from 0.8.2 onward ? Any tips on fixing this ?
Michael Cuneo
Hey guys,
Great react component.
Michael Cuneo
Is there a good example of the Map Data somewhere, that isn’t just components and chunks of code slapped onto a page?
Ryan Lanciaux
The working examples are part of the docs project on GitHub
Michael Cuneo
Yeah, I saw that, but they don’t function.
Ryan Lanciaux
That uses griddle as a map too
Running the docs site locally does function as well
If you pulled the code down and the map example isn’t working locally like it is on the, site please file an issue
César Carrillo
hey guys! what are your thoughts about using Griddle, maybe vs React-Table if any one has used it.. is this the better option for a developer who is looking for a Datatable-ish plugin-library?
for React*
for a React Project*
Michael Cuneo
My thoughts is that it’s a good solution, but I’ve never tried anything else… seems to work fine for me.
Considering that this is a Datatable-ish plugin-library for a react project … you’ve found what you’re looking for I’d say.
Irfan Nazir
Hi guys - I'm having a problem with a component in the Layout (additionalComponents) - not re-rendering after a state update. Is there a special trick to get this to work?
Some code snippets:
  renderControls() {
    return (
        <div className="pull-right">
          <label className="ui-checkbox">
              onChange={() => {}}

render() {
    const NewLayout = FullLayout({
      additionalControls: this.renderControls(),
      showFilter: true,
      showPagination: myData.length > 100

    return (
        pageProperties={{ pageSize: 100 }}
        components={{ Layout: NewLayout }}
Jerry Huckins
Where can I find good docs on upgrading Griddle from 0.8 to current?
Michael Cuneo
Hey guys.
I’ve got a project breaking issue, that I need to figure out.
My columnMetadata is being ignored. :(
Michael Cuneo
Ahh that’s old anyway.
Is value the only thing I can get from a customComponent?
That can’t be right.
Dibyo Majumdar
Is this project being actively maintained? There doesn't seem to be any activity on the PRs. (maybe I am just being impatient?)
Clint Milner
Hello - I was wondering if there was a way that the RowDefinition component could access the data for that row? ie: Imagine a table of users where the data is passed as 'data' to the Griddle component. If the user is at work, I want to add a cssClassName to the RowDefinition. Thank you.
Sander Breivik
Are there any styling out for use? Or do i have to style the griddle table by myself?
Axel Huizinga
How can I add a callback function to the props of a custom Layout component?
I want to display the Filter within my Sidebar at the parent component
Kakashi Hatake
is it possible to take the filter input field and place it where ever you want and give it another style/size etc.?