Hi!

First of all, thank you for a nice lib!
But there is a question I struggle with.

As far as i can see there is a big amount of styles inserted directly into html as internal styles. In case I would like to override CSS_PREFIX i still have to handle a heavier page with those styles.
Either I can not simply override styles (for example remove shadow from the container) in my external style file since internal styles have higher priority!

I would really appreciate if you reorganize styles as an external stylesheet.
Thanks!

This code would not work with current implementation of stateGetter.js

import { Reducers as gridReducers } from 'react-redux-grid'
export default combineReducers({
  routing: routerReducer,
  grid: combineReducers(gridReducers),
  account,
  settings,
  segments
})

ReducerKeys options could be string or an array. In example above reducerKeys='grid'.

Does the component support server-side rendering? I got the following errors:

error: ReferenceError: navigator is not defined
    at Object.<anonymous> (D:\dev\project\watchlist\node_modules\react-redux-grid\dist\components\layout\header\Column.js:31:30)
...

Do I need to set any environment setting? Please advise. Thanks.

p.s: I will google to see if there is any solution to this.

First of all, I am new to javascript. So pardon me if I am asking for too much or asking too many questions.

@bencripps, may I request to make this project "distributable" ready? What I meant by "distributable" is to have a "dist" folder with the scripts (compiled) and ready for use. The reason for this request is because I am struggling to compile / setup react-redux-grid into my main project.

Thanks for the wonderful component regardless.

Hi Ben,

I have this weird experience that the grid is not rendering data.
It seems like the columns prop of the Row is an empty array but columns prop of columnManager prop of the Row has all the 5 columns. Why the columns is empty?

Any ideas?

not sure where to post questions!

Wanted to know how multiple table interactions should be handled... Right now, I've got multiple table each loading it's own data (each one being a component).

I have some grids which require other table data - it'd be easier if the data were loaded on to a user controllable key
Accessing the data is quite difficult: state.getState().dataSource["stateKey"].data (right?)
Also there are loads of duplicates - my app is running at 400MB+ at the moment and I'm not doing much! 😆

Requirement 1:
Grid - Car Types
Grid - Car Makes/Model

Makes/Model requires Car Types data - so if it's not loaded I want to load it up first, then load the makes/model dataSource..

So the concept of dependent dataSources? Or hierarchical sources? Not if it's that's important to you at all.. If I have to do it, then I'd have to manage all the data myself - I suppose. Just wanted to double check.

(As a side comment - would be great to have an api to grab the data quickly.. data[stateKey] or something that is stable..

Requirement 2:
Removing the data cache - last mentioned above, I need to mark certain grids to not cache when data is not shown - some tables are big and should fetch them again if needed. I'd be nice to have a marker I could use to denote this

Let me know if this is important to you - and if I can assist... Otherwise, if you would be able to provide some guidance/suggestion that'd swell.

Hi, I know this is pretty new, but I'm having a bit of trouble getting it installed in my app.
I have listed my current issues below. If you help me get it working I can do a pull request on your docs, and incorporate what I have learned.
Thanks,
Raif

1. I'm not sure how to join it's store with my existing store. My store set up currently looks like this:

var middlewares = [thunk, api];

const enhancer = compose(
    // Middleware you want to use in development:
    applyMiddleware(...middlewares),
    // Required! Enable Redux DevTools with the monitors you chose
    DevTools.instrument()
);
const store = createStore(reducer,enhancer);

2. I created a component that looks like this:
   import { Grid, Store } from 'react-redux-grid'

const data = [
{
    name: 'Michael Jordan',
    position: 'Shooting Guard'
},
{
    name: 'Charles Barkley',
    position: 'Power Forward'
}
];



const gridData = {
    store: Store,
    ...data
};

export default <Grid { ...gridData } />

when I try to start it I get

ERROR in .//react-redux-grid/src/style/main.styl
Module parse failed: /home/reharik/Development/MethodFitness/MF_FrontEnd/node_modules/react-redux-grid/src/style/main.styl Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import 'mixins'
| @import 'font'
| @import 'icons'
@ .//react-redux-grid/src/components/Grid.jsx 58:0-29

My webpack loaders look like this:

{ test   : /\.jsx?$/, exclude: /[\\\/]node_modules[\\\/](?!react-redux-grid)/, loader : 'babel-loader' },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        //{ test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
        { test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png" } },
        { test: /\.jpg$/, loader: "url-loader", query: { mimetype: "image/jpg" } },
        { test: /\.gif$/, loader: "url-loader", query: { mimetype: "image/gif" } },
        {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loaders: ['url-loader?limit=10000&mimetype=application/font-woff' ]
        },
        { test: /\.styl$/, exclude: /node_modules|\.json$/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] }

My app uses ImmutableJS as the root state object and react-redux-grid assumes that the state will be a plain object.

This will facilitate dropping an item onto the grid from a non-grid element.

See #59

Issue: grid doesn't show the data

1. Plugged in my own store - added all the reducers from Reducers
2. I've got the grid all plugged in ( shows "No data available") by passing a promise to the dataSource prop.
3. I can see that the SET_COLUMNS action is raised properly
4. I can verify that the dataSource is called and processed - and returns a valid value, subsequently SET_DATA is raised with the "data" prop populated.
5. on the component containing the , I can see that the componentWillReceiveProps() is called - and that the props have a "dataSource" entry which is a map with the "lastUpdate": 2 and "myGridKey".
   a. "myGridKey" entry is also a Map { "data": List [ Map { {entry1}, {entry2}, etc } ] }

The grid shows nothing at this point. My app hooks in to hot loading and when a file is changed and the hot loader is invoked, the grid shows the data (So I know somewhere everything is configured properly!).

I am completely lost at this point - I don't think I've missed anything, but let me know if someone could assist.

Thank you!

Hi Ben,

In documentation it says createKeyFrom and in the detailed doc it says createFromKey!

Which one is correct?

When using the grid with a promise dataSource as specified in the docs the default pager doesn't work.
In src/actions/plugins/pager/PagerActions.js:112 the dataSource is being passed as URL to the Api method which in turn results in a stringified version of whatever code was provided as dataSource.

# @headwinds

Hi Ben,
In the column definition there is a "HANDLE_CLICK" property that takes a function. I thought this would make the cell clickable, but it seems that it makes the header cell clickable. Is there a way / it would be great if there was a way to make a cell clickable and pass the cell and row data to the event.
I know that you can select a row which is great, but I often have fairly complex grids, that would have a bulk select, a row select ( really just click on the "name" cell ), perhaps an email column where the cell has an anchor tag href="mailTo:..." etc.
If this is not available I'll take a stab at it. If you could let me know how you'd prefer it to be handled that would help to.
Thanks,
R

I can't figure out a way to add a custom sorting function to a column. Is it possible?

Hi!

I'm using a grid editor with type = 'grid' and validator function for email cells.
While debugging I can see that my validator function is called and returns proper value for invalid cells, however even it returns false I can not see any action happening with grid/cell/row.

So here is the question:
Is anything supposed to happen? should the invalid row have additional class (smth like .invalid or .error)?

Thank you very much!

I noticed a bug/issue when digging into the HANDLE_CELL_CLICK code in Cell.jsx this line is being transpiled into return events.HANDLE_CELL_CLICK.apply(undefined, _arguments); and _arguments is definitely not the scope we need here. I'm unsure if this is a bug with Babel, or with the babel/webpack config.

Hi Ben,

Is there a way to hide the grid header row? Based on the documentation, I can only find an option to hide the columns but not the header or any rows for that matter.

Also, does the grid support a collapsible row similar to this http://jsfiddle.net/rnqZu/2/? A row click event should open a new row underneath the clicked one.

Many Thanks!

Hi!

This problem can be reproduced on demo site too
http://react-redux-grid.herokuapp.com/Simple

when you change column sorting to asc sorting arrow in the column header disappears however i can see it among styles
.react-grid-header th .react-grid-sort-handle.react-grid-asc::before
but it's not being caught

Hope it helps!
Thank you!

It would be nice if the grid actions were less generic.

Instead of calls like SET_DATA it'd be nice if they read something like SET_GRID_DATA.

Not sure if this should be a configurable option, or if it would be better with a simple prefix.

// possible use
import { configureGrid } from 'react-redux-grid';
configureGrid({ actionPrefix: 'RRGRID' });

Maybe this would output SET_RRGRID_DATA or RRGRID_SET_DATA.

It'd be nice to have a global configuration where you don't have to tell each implementation of grid to do this.

@bencripps Let me know your thoughts.

I'm testing the grid standalone - using WDS.

webpack-dev-server --hot --inline --pretty --config webpack/webpack.config.hot.js

Grid renders on :8080, but no data in it.

How do I configure the demo provider to load the sample data?

you have an endpoint in DemoData.js

GET http://localhost:3000/getfakeData 404 (Not Found)

I changed it to the WDS default 8080

GET http://localhost:8080/getfakeData 404 (Not Found)

still didn't work - Thanks! Michael

the demo is great - but I don't know if it actually does anything to the back end.

1. save after edit
2. delete
3. add rows

Not sure how I'd use the GRID_ACTIONS plugin to delete the row
EVENT_HANDLER(data) { ... }
data.metaData seems to have the row in question - but what's the intended pattern to update the ui+server?

I figure..

1. have all the relevant fetch() with uris all in scope and get a promise
2. promise.then -> store.dispatch a new SET_DATA without the referenced row to update the ui
   am I way off? (I'm new to everything so let me know if I speak nonsense.. :D)
   if I'm on the right path - it'd be super helpful to pass the store when calling EVENT_HANDLER.

Enhancement Request
Ideally, I'd like to configure the dataSource function to actually not only load, but have other actions attached..
dataSource {
load() {}
update(row) {}
delete(row) {}
}
That way for (1) everything is already in scope -- anyway that'd be a major change.

I tried to compile the library on the master branch by > npm run dist and I get the following error messages:

Error: src/components/Grid.jsx: Cannot find stylus file: ./../style/main.styl
    at Error (native)
    at compileStylusFile (D:\dev\github\react-redux-grid\node_modules\babel-plugin-stylus-compiler\build\index.js:48:11)
    at PluginPass.ImportDeclaration (D:\dev\github\react-redux-grid\node_modules\babel-plugin-stylus-compiler\build\index.js:72:21)
    at newFn (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\visitors.js:301:19)
    at NodePath._call (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\path\context.js:106:12)
    at TraversalContext.visitQueue (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\context.js:167:16)
    at TraversalContext.visitMultiple (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\context.js:113:17)
    at TraversalContext.visit (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\context.js:209:19)
    at Function.traverse.node (D:\dev\github\react-redux-grid\node_modules\babel-traverse\lib\index.js:161:17)

Hi Ben,

It seems like changes to data property doesn't force re-render.
I looked at the code and it seems like in util/mapStateToProps, the code is ignoring data and only listening to dataSource:
gridData: stateGetter(state, props, 'dataSource', props.stateKey),

Will you please look into this?

One more question: What's the difference between Grid and ConnectedGrid?

Cheers.

I'd like to be able to keep the last state that grid was sorted on in my redux store.

Something like:

{
  dataIndex: 'name',
  direction: 'DESC'
}

Hi,
I'm having a hell of a time trying to hook up my own store.
I've figured out that to get my store out of the I need to destructure it from the second argument passed to an anonymous function. And that also I have to sort of register the context so I have this.

const grid =  (props, {store}) => (
            <Grid store= {store} { ...gridData } />
);
grid.contextTypes = {
    store: React.PropTypes.object
};

export default grid;

Then I try to pass the stat reducers into the CombineReducer function I tried

import { Reducers } from 'react-redux-grid';

const reducer = combineReducers({
DataSource: Reducers.datasource,
Grid: Reducers.grid,
BulkActions: Reducers.bulkaction,
Editor: Reducers.editor,
ErrorHandler: Reducers.errorhandler,
Filter: Reducers.filter,
Loader: Reducers.loader,
Menu: Reducers.menu,
Pager: Reducers.pager,
Selection: Reducers.selection,
menu,
auth,
routing: routerReducer,
form: formReducer
});

as well as what I was hoping would work

const reducer = combineReducers({
Reducers,
menu,
auth,
routing: routerReducer,
form: formReducer
});

However when I inspect my store object all I see are the menu -> form properties. I don't see anything related to the grid, and the grid doesn't seem to function as expected.

If I just use the react-redux-grid store it does work as expected.

can you help me see what I'm doing wrong?

Thank you,

Raif

Reordering the columns by clicking and dragging no longer works with the latest code.
I first noticed this looking at the example app on herokuapp on Friday, 2017-02-03

To reproduce:

1. go to http://react-redux-grid.herokuapp.com/ in your browser
2. select the "Complex" example from the Examples side bar on the left
3. click on the word "Phone" in the grid header, drag it to the right of the word "Email" and release the mouse

Observed behavior:

• The ghost drag image disappears, and nothing changes in the grid.

Expected behavior:

• The Phone Number column is moved to the right of the Email column.

Hi again!
I have another question.

When i use editor plugin in mode=inline I would really like 'Save' and 'Cancel' to be responsive to key events. I think it's a good idea to save on pressing Enter and cancel on pressing Escape or allow to set up your own shortcut for save/cancel.

I investigated this issue a bit and the easiest solution for non-input components seems to be adding keyup listeners on componentDidMount and removing those listeners on componentWillUnmount in Inline or Button component.

What do you think?
Thanks!

Hi Ben,
Here is a weird issue: There is apparently a trailing space in the name of one of your test files and that breaks our build process. Will you please remove that?
Here is the file:
"\node_modules\react-redux-grid\test\components\Grid.test.js “
Notice the space after .js!

Cheers

Hi Ben,

Is there a way to theme the grid with particular css frameworks.
Let's say for example: Theme it with bootstrap and associate the grid with bootstrap css classes like:
table, table-bordered, table-hover, table-responsive, etc.. so that when my bootstrap theme changes, the grid's look and feel changes as well.

That would be really nice.

Cheers

I tried to use the Grid Menu (by including the GRID_ACTIONS object into the plugins object).

GRID_ACTIONS: {
        iconCls: 'action-icon',
        menu: [
            {
                text: 'Delete',
                EVENT_HANDLER: () => {
                    alert('hi');
                }
            }
        ]
    }

I can see the icon, but when I click on it nothing happens. No menu is displayed (as the one displayed on the demo)

Something I noticed is that I have an UNMET PEER dependency when I installed react-redux-grid. Maybe that's connected to the problem?

--> UNMET PEER DEPENDENCY history@^1.17.0

Hi,

Thanks for making this open source. It seems to be the most feature-rich one that I have seen. But I am curious as to why the tree view has the above requirement. How does it perform if there are thousands of records with a varying degree of nesting?

Hi again.

Is there a configuration item which would allow one to drag a whole row (plus/minus children) to a non-grid item? Like a separate <div/> somewhere?

I've got a tablist with each tab managing a grid.
one tab with one grid works without any problems.
When I add another grid (with a different statekey) it breaks.

This error:

// Uncaught TypeError: Cannot read property 'values' of undefined
// Button.jsx
export const onButtonClick 

I also get this error:

// Uncaught TypeError: Cannot read property 'top' of undefined
// Inline.jsx
export const resetEditorPosition

I'll try to debug more later on, but I don't think this is anything I'm doing wrong on my side.
The FIRST tab always works. It's the subsequent tab that doesn't - so if I switch it around, it still fails for the second tab..

Let me know if this is a valid bug.

Hi, maybe this is a real issue not something I'll find the answer to in 5 minutes :)
Is there a way to specify the contents of a cell, meaning the html contents? Can we put a component in there so as to display an image, or just a link?
Thanks,
R

I congratulate you for this module, it is really very well done!

But I need to customize the UI by changing the graphics (and here just edit css) and adding a pager (to bootstrap) both above and below the grid.
Also I'd like to put the box of filters over the grid always open.

Could you advise me a way to make these changes without the need to fork the project and modify it massively?

Steps to reproduce:

1. Make a local clone of the react-redux-grid:

$ git clone https://github.com/bencripps/react-redux-grid.git
$ cd react-redux-grid

2. Follow the steps in the "Installation" section of README.MD to build and run the demo:

$ npm install
$ npm run demo

3. Open your browser pointed to http://localhost:8080

Observed behavior:

• A blank page loads in the browser, and the following error is displayed in the terminal, "GET /demo/lib/bundle.js" Error (404): "Not found"

Expected behavior:

• The grid displays in the browser, and there is no error.

Note: I have a simple fix for this issue and will be submitting it immediately.

Hi Ben,

Great component! Well done.
I can't seem to be able to get the sort icons show on column headers.
Even in your demo page (http://react-redux-grid.herokuapp.com/) it seems like they are hidden despite the fact that you have them enabled for 3 columns.

It seems like they are hidden for some reason:
.react-grid-header th .react-grid-sort-handle {
float: left;
transition-duration: 150ms;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
visibility: hidden;
}

Is there anything else needs to be set other than simply setting sortable: true in column definition?

Cheers

There is an entry in bootstrap css:

button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit} 

Which for some reason makes the editor show in color:white, aka not visible.

This is due to the entry src/style/components/row.styl

         &.{editclass}
            color whitecolor       <--- this guy
             background-color editcolor

Not sure why it's white on grey, but this doesn't work with bootstrap - not sure if this is a problem for others, but I can't seem to manually override it (due to the way webpack is sourcing the css)
(Perhaps if I knew webpack better I could order it properly and load it.. :D)

thoughts? can we remove this line? as the 'user agent stylesheet' makes the input background to white..
or perhaps override the default input background to the editor color.. or at least to inherit..

Hello,

I've seen you are building very nice component which might help me a lot, but I can't understand why can't I import only Grid. When I try to do it, webpack build breaks saying this:

> ERROR in ./~/react-redux-grid/src/index.js
> You may need an appropriate loader to handle this file type.
> | import { combineReducers } from 'redux';
> | 
> | import { ConnectedGrid } from './components/Grid.jsx';

I'm using react/redux architecture to build web app, is there a confilct between my store and your store. Can't get what's wrong even with simple example.

Hi Ben,

I really like what you've done - very nice, one of the best UIs I've seen

This is an enhancement request for infinite scroll capability - makes the grid feel more fluid and helps brings the data to life.

Ideally for both horizontal and vertically so one can scroll through a large number of columns (perhaps with one fixed), and vertical with hidden background fetches for the next page of data. A little momentum in the animation is fun too. :)

Thanks,

Michael

@bencripps, sorry for being noob, is the source codes for the demo (http://react-redux-grid.herokuapp.com/) released?

If yes, please direct me to the download link. Thanks!

Hi!

If i use editor plugin in mode = 'inline' I can see that there are several types of events going on

  HANDLE_BEFORE_INLINE_EDITOR_SAVE: () => {}
  HANDLE_AFTER_INLINE_EDITOR_SAVE: () => {}

Is it possible to create something similar grid mode when i try to switch to another cell for editing?
for example:

  HANDLE_BEFORE_EDITOR_START: () => {}
  HANDLE_AFTER_EDITOR_END: () => {}

or is there another way to catch losing focus of cell input when i finish editing?

Thanks!

It would be nice if grid came with selectors out of the box.

We can consume them internally as well as export them for users.

Proposed Selectors

These were the selectors I was thinking would add most value, let me know if you can think of some others:

• getCurrentRecords
• getIsEditing
• getIsLoaded
• getPager
• getSelectedRows
• getTreeData

Implementation options

We have a couple of different ways we use the selectors. I've come up with two options, we can choose one or do both.

Option A

import { buildSelectors } from 'grid';

const gridKey = 'grid-1';

const selectors = buildSelectors(gridKey);

const mapStateToProps = state => ({
    selectedRows: selectors.getSelectedRows(state),
    isLoaded: selectors.getIsLoaded(state)
})

Option B

import { selectors } from 'grid';

const gridKey = 'grid-1';

const mapStateToProps = state => ({
    selectedRows: selectors.getSelectedRows(gridKey, state),
    isLoaded: selectors.getIsLoaded(gridKey, state)
})

Currently isCreate isn't available for custom editors which prevents enabling/disabling inputs for custom editors based on isCreate.

First of all, slick library and good work. Thanks.

However, the demo that you have at http://react-redux-grid.herokuapp.com does not show the vast capabilities of this component:

• Dragging Column Orderring (does not refresh).
• Sortable Columns (clicked but nothing happen).
• Delete of rows (clicked but nothing happen, not sure if this is intended).

Tested using chrome (50.0.2661.102) and firefox (47.0.1).

Should consider adding Editor Config for easier collaboration.

The data schema as followed:
{ symbol: 'AAPL', name: 'Apple', close: 123.45 }

Assuming there are 2 columns in the table: Stock and Price. The Stock column will render two fields: symbol and name. <div>{symbol}</div><div>{name}</div>

Based on your example, my Stock column will be something like below:

export const stockColumn = [
    {
        name: 'Stock',
        dataIndex: 'symbol + name',  // <--- what should be the input for multiple fields?
        renderer: ({ column, value, row }) => {
            // can the value be a object containing symbol and name?
            ...
        }
    }
];

Please advise me. Thanks in advance!

Is there a way to overwrite emptyDataMessage?

Objective: To add animation when row is added / removed in react-redux-grid.

In order to achieve the above, I am thinking to use this animation library https://github.com/joshwcomeau/react-flip-move. However, there are some prerequisites using react-flip-move; each row must include an unique attribute called "key". The animation will make use of this "key" to render the animation effects.

Based on your online demo, each row is represented as:

<tr class="react-grid-row" data-reactid=".0.1.1.0.3.0.1.$0">

Is it possible (without modifying react-redux-grid core) to add a key attribute? i.e.

<tr class="react-grid-row" key="APPL" data-reactid=".0.1.1.0.3.0.1.$0">

Please advise me. Thanks!