Giters

NeXTs / Clusterize.js

Tiny vanilla JS plugin to display large data sets easily

Home Page:https://clusterize.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can this work with React?

bfang711 opened this issue · comments

commented

Here is what I do. I try to put the Clusterize into a REACT element. However met error

"Uncaught Error: Error! Could not find scroll element
at new Clusterize (clusterize.js:55)"

import Clusterize from 'clusterize.js';
export class TheTable extends React.Component {

   componentDidMount() {
        console.log(this.refs.contentArea);
        var data = ["<div>1</div>", "<div>2</div>"];
        var clusterize = new Clusterize({
            rows: data,
            scrollId: this.refs.scrollArea,
            contentId: this.refs.contentArea,
        });
    }
   render() {
        return (
               <div id="scrollArea" ref="scrollArea" className="clusterize-scroll">
                <div id="contentArea" ref="contentArea" className="clusterize-content">
                  <div className="clusterize-no-data">Loading data…</div>
                </div>
              </div>
);}
}

One more quick question. I ultimately would like to use some array of React DOM to fill in data. I know Clusterize only support string in data part. I just wonder if anyone ever use that way, instead of just simple number/strings. thank you.

commented

Hello

there are react-clusterize package which should work better for react https://github.com/trendmicro-frontend/react-clusterize

also consider react-based virtual-scrolling libraries
https://github.com/coderiety/react-list
https://github.com/bvaughn/react-virtualized

commented