Cannot dynamically show or hide columns

[jackgeek]

Griddle version

1.3.1

Expected Behavior

Changing the visible prop on ColumnDefinition should cause columns to be hidden or shown appropriately.

Actual Behavior

The column is only shown/hidden based on visible prop on first render. Subsequent updates don't get taken into consideration

Steps to reproduce

In render method:

    <Griddle
      data={data}
      plugins={[plugins.LocalPlugin]}
    >
      <RowDefinition>
        <ColumnDefinition id="name" title="Name" />
        <ColumnDefinition id="state" title="Location" order={1} width={400} />
        <ColumnDefinition id="company" title="Organization" visible={this.state.companyVisible} />
      </RowDefinition>
    </Griddle>

Now toggle this.state.companyVisible

[jackgeek]

Just tried this on 1.6.0 and the same behaviour is experienced

[dahlbyk]

Try setting <Griddle key={...}> based on companyVisible, e.g.

<Griddle key={`visible:${this.state.companyVisible}`} data={data} ...>

[jackgeek]

Yes thanks this works and is what I am presently doing. However there are potentially a lot of things I have to monitor the changes of and maintaining this is cumbersome. I have worked around this for now using key but it would be nice if the library responded to prop changes.

[dahlbyk]

Currently the row/column definitions are only parsed on initial load. I wonder if we should refresh them on componentWillReceiveProps?

[jackgeek]

Sounds like a good idea to me

[ryanlanciaux]

The other thing I was thinking is that we could make the column definitions update the store for their own properties instead of Griddle top component managing the column settings (it just passes them to the store anyhow).

What I'm envisioning this looking like is the column definitions would also connect and have an action that fires off it's properties. Right now it's Griddle that does all that interaction. Thoughts? (I'm not opposed to any of the other routes either :D)

[bpugh]

@ryanlanciaux I'd be happy to take a shot at this. Your approach sounds like it might be the correct. Would you be able to point me in the right direction?

[dahlbyk]

Another thing to consider related to dynamic Row/Column definitions: I've run into a situation where it would have been nice to connect() a custom ColumnDefinition to an external store, specifically to load in a column visibility preference. I wasn't able to get it to work, though.

[ajpnaveen]

Is it possible we have a solution to this issue yet? I'm working on implementing check boxes to all the columns and need to show/hide columns dynamically. Griddle only parses ColumnDefinition at the initialization.

[anmol5varma]

<Griddle
        storeKey="griddleStore"
        data={data}
        plugins={[plugins.LocalPlugin]}
        styleConfig={styleConfig}
        sortProperties={sortProperties}
        pageProperties={{
          currentPage: 1,
          pageSize: Number.MAX_SAFE_INTEGER,
        }}
        components={{
          Layout: newLayout,
        }}
      >
        {listingConfig && (
          <RowDefinition>
            {listingConfig.map((column, i) => {
              const { centerAligned } = this.props;
              return (
                <ColumnDefinition
                  id={column.id}
                  title={column.title}
                  key={column.id}
                  cssClassName={centerAligned && i !== 0 ? 'force-text-center' : ''}
                  headerCssClassName={`${
                    centerAligned && i !== 0 ? 'force-text-center' : ''
                  } ${column.headerClassName || ''}`}
                  customComponent={getFieldComponent(column)}
                  customHeadingComponent={column.customHeadingComponent}
                  sortMethod={column.sortMethod}
                  sortable={column.sortable !== undefined ? column.sortable : true}
                />
              );
            })}
          </RowDefinition>
        )}
      </Griddle>

In the following code, listingConfig is being read from the props. But when they change still the griddle table isn't updated. Any suggestions or fixes on the same?

[dahlbyk]

@anmol5varma I don't think any progress was made on a fix or work-around for this issue.