(for others' reference, he's referring to https://github.com/GriddleGriddle/griddle-core/blob/master/js/actions/local-actions.js#L30-L36)
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?
@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)} />
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
@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
@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.
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.
Great react component.
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
for React*
for a React Project*
Considering that this is a Datatable-ish plugin-library for a react project … you’ve found what you’re looking for I’d say.
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:
Some code snippets:
renderControls() {
return (
<div>
<div className="pull-right">
<label className="ui-checkbox">
<input
name="toggleThing"
type="checkbox"
checked={this.props.doToggle}
onChange={() => {}}
/>
<span>Toggle</span>
</label>
</div>
</div>
);
}
render() {
const NewLayout = FullLayout({
additionalControls: this.renderControls(),
showFilter: true,
showPagination: myData.length > 100
});
return (
<Griddle
data={myData
plugins={[plugins.LocalPlugin]}
pageProperties={{ pageSize: 100 }}
components={{ Layout: NewLayout }}
>
....
}
I’ve got a project breaking issue, that I need to figure out.
My columnMetadata is being ignored. :(
Is value the only thing I can get from a customComponent?
That can’t be right.
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.
