ReactJS - Griddle v1.0 get current filtered data

Question

Im trying to figure out how to get the current filtered items from the Griddle component.

I found the following function in the source-code:

var filteredDataSelector = exports.filteredDataSelector = (0, _reselect.createSelector)(dataSelector, filterSelector, function (data, filter){
        return data.filter(function (row) {
        return Object.keys(row.toJSON()).some(function (key) {
        return row.get(key) && 
        row.get(key).toString().toLowerCase().indexOf(filter.toLowerCase()) > -1;
      });
   });
});

But how would I use the filteredDataSelector in my react-component? I would like to get the filtered items when clicking a button export to excel.

I found this example on how to interact with each item (to render hyperlink instead of just plain text) in the list which I think should work in a similair way to what I want to achieve: https://github.com/GriddleGriddle/Griddle/issues/586

I dont really understand how this works with redux and the connect function, but example above worked just fine.

Not sure if I have to use redux/connect in a similair way to get the filtered list of items?

Griddle-documentation: https://griddlegriddle.github.io/Griddle/docs/

Answer 1

Found a way to solve this, even though Im pretty sure there is a better solution, then please let me know.

First I overrided the TableBody griddle-component and also made a small fix to get it work properly in internet explorer 11, ie11 (list._tail.array). I store the currently filtered datarow indexes in this.rowIds.

                TableBody: (_ref) => {
                    var rowIds = _ref.rowIds,
                        Row = _ref.Row,
                        style = _ref.style,
                        className = _ref.className;

                    this.rowIds = rowIds._tail.array;

                    var list = rowIds && rowIds.map(function (r) {
                        return React.createElement(Row, { key: r, griddleKey: r });
                    });

                    //ie11 felsökningsfix:
                    //console.log(list);
                    //console.log(list._tail.array);

                    return React.createElement(
                        'tbody',
                        { style: style, className: className }, list._tail.array //fix för ie11! orginalkoden skickade bara in list, men krachade då i ie11.
                    );
                }

Using the rowDataSelector as explained in this article: https://griddlegriddle.github.io/Griddle/examples/getDataFromRowIntoCell/ and then using the rowIds field to get the selected data, only at the first row-index.

    this.rowDataSelector = (state, { griddleKey }) => {
        if (griddleKey === this.rowIds[0]) {
            this.selectedData = this.rowIds.map(function (id) {
                return state.get('data')
                    .find(rowMap => rowMap.get('griddleKey') === id)
                    .toJSON();
            });
        } 
        return state
            .get('data')
            .find(rowMap => rowMap.get('griddleKey') === griddleKey)
            .toJSON();
    }

Using it:

exportToExcel() {
if (this.selectedData.length != 0) {
    var results = this.selectedData;
    Api.exportToExcelPre('/product/exporttoexcelpre/', results).then(result => {
        window.location = Constants.API_URL + '/product/exporttoexcel/';
    });
}
}

Final code:

import { connect } from 'react-redux';

export default class ProductList extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        loading: true
    };
}

updateProductList() {
    Api.getProducts().then(products => {
        this.setState({ data: products, loading: false });
    });
}

componentDidMount() {
    this.updateProductList();
}

componentWillReceiveProps(props) {
    if (props.refreshProductList) {
        this.updateProductList();
    }
}

render() {
    if (this.state.loading) {
        return (
            <div>Läser in produkter...</div>
        );
    }
    return (
        <div>
            <ProductResultList products={this.state.data} />
        </div>
    );
}
}    
class Filter extends Component {
constructor(props) {
    super(props);
}

onChange(e) {
    this.props.setFilter(e.target.value);
}

render() {
    var imgExcelLogo = <img src={PathHelper.getCurrentPathAppend("img/excel_logo.png")} className="export-symbol" onClick={this.props.export} style={{ float: "right" }} />;
    return (
        <div>
            <div className="row">
                <div className="form-group col-md-6 label-floating is-empty">
                    <label class="control-label" htmlFor="search-product">Sök på valfritt fält, exempelvis produktnamn/produktkategori osv.</label>
                    <input className="form-control" type="text" name="search-product" id="search-product" onChange={this.onChange.bind(this)} />
                </div>
                <div className="col-md-6 form-group" style={{ minHeight: "35px" }}>
                    {imgExcelLogo}
                </div>
            </div>
        </div>
    );
}
}    

export class ProductResultList extends Component {
constructor(props) {
    super(props);
    this.rowIds = [];
    this.selectedData = [];
    this.styleConfig = {
        classNames: {
            Row: 'row-class',
            Cell: "col-md-2",
            TableHeadingCell: "col-md-2 cursor",
            Table: "table table-striped table-hover",
            Filter: "form-control"
        },
    }
    this.sortMethod = {
        data: this.props.products,
        column: "generatedId"
    }
    this.settings = {
        // The height of the table
        tableHeight: 100,
        // The width of the table
        tableWidth: null,
        // The minimum row height
        rowHeight: 10,
        // The minimum column width
        defaultColumnWidth: null,
        // Whether or not the header should be fixed
        fixedHeader: false,
        // Disable pointer events while scrolling to improve performance
        disablePointerEvents: false
    };
    this.pageProps = {
        currentPage: 1,
        pageSize: 1000
    }

    this.rowDataSelector = (state, { griddleKey }) => {
        if (griddleKey === 0) {
            this.selectedData = this.rowIds.map(function (id) {
                return state.get('data')
                    .find(rowMap => rowMap.get('griddleKey') === id)
                    .toJSON();
            });
        } 
        return state
            .get('data')
            .find(rowMap => rowMap.get('griddleKey') === griddleKey)
            .toJSON();
    }
    this.exportToExcel = this.exportToExcel.bind(this);
    this.enhancedWithRowData = connect((state, props) => {
        return {
            // rowData will be available into MyCustomComponent
            rowData: this.rowDataSelector(state, props)
        };
    });
}

exportToExcel() {
    if (this.selectedData.length != 0) {
        var results = this.selectedData;
        Api.exportToExcelPre('/product/exporttoexcelpre/', results).then(result => {
            window.location = Constants.API_URL + '/product/exporttoexcel/';
        });
    }
}

LinkComponent({ value, griddleKey, rowData }) {
    return (
        <Link to={PathHelper.getCurrentPath() + "product/edit/" + rowData.id}>{rowData.name}</Link>
    );
}

render() {
    return (
        <Griddle
            ref='Griddle'
            styleConfig={this.styleConfig}
            data={this.props.products}
            pageProperties={this.pageProps}
            sortProperties={this.sortProperties}
            components={{
                Layout: ({ Table, Filter }) => <div><Filter /><div className="table-responsive"><Table /></div></div>,
                Settings: () => <span />,
                SettingsContainer: () => <span />,
                SettingsToggle: () => <span />,
                PageDropdown: () => <span />,
                NextButton: () => <span />,
                Filter: (filter) => {
                    return <Filter products={this.props.products} export={this.exportToExcel} setFilter={filter.setFilter} />
                },
                TableBody: (_ref) => {
                    var rowIds = _ref.rowIds,
                        Row = _ref.Row,
                        style = _ref.style,
                        className = _ref.className;

                    this.rowIds = rowIds._tail.array;

                    var list = rowIds && rowIds.map(function (r) {
                        return React.createElement(Row, { key: r, griddleKey: r });
                    });

                    //ie11 felsökningsfix:
                    //console.log(list);
                    //console.log(list._tail.array);

                    return React.createElement(
                        'tbody',
                        { style: style, className: className }, list._tail.array //fix för ie11! orginalkoden skickade bara in list, men krachade då i ie11.
                    );
                }
            }}
            plugins={[plugins.LocalPlugin]}>
            <RowDefinition>
                <ColumnDefinition id="generatedId" title="Produkt-Id" />
                <ColumnDefinition id="name" title="Namn" customComponent={this.enhancedWithRowData(this.LinkComponent)} />
                <ColumnDefinition id="productCategoryName" title="Produktkategori" />
                <ColumnDefinition id="productTypeName" title="Produkttyp" />
                <ColumnDefinition id="supplierName" title="Leverantör" />
                <ColumnDefinition id="toBeInspectedString" title="Besiktigas" />
            </RowDefinition>
        </Griddle>
    );
};
}

Answer 2

Assuming you're using LocalPlugin, you would use filteredDataSelector in an enhancer/container to inject the prop into your presentation component. Roughly:

import React, { Component } from 'react';
import Griddle, { connect } from 'griddle-react';
import PropTypes from 'prop-types';
import getContext from 'recompose/getContext';

const FilterContainerEnhancer = OriginalComponent => compose(
  getContext({
    selectors: PropTypes.object
  }),
  connect((state, props) => ({
    filteredData: props.selectors.filteredDataSelector(state)
  }))
)(props => <OriginalComponent {...props} />);

class FilterWithFilteredData extends Component {
  setFilter = (e) => this.props.setFilter(e.target.value);

  render() {
    return (
      <div>
        <input
          type="text"
          name="filter"
          placeholder={this.props.placeholder}
          onChange={this.setFilter}
          style={this.props.style}
          className={this.props.className}
          />
        ({this.props.filteredData.length} rows)
      </div>
    );
  }
}

// ...

return (
  <Griddle
    data={...}
    plugins={[LocalPlugin]}
    components={{
      FilterContainerEnhancer,
      Filter: FilterWithFilteredData
    }}
    />
);

If you're not using LocalPlugin, you're on your own as data is expected to be managed externally.