Skip to content

marcelmokos/react-virtualized

Repository files navigation

Demos available here: http://bvaughn.github.io/react-virtualized/

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

VirtualScroll Example

import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualScroll } from 'react-virtualized';

// List data as an array of strings
const list = [
  'Brian Vaughn'
  // And so on...
];

// Render your list
ReactDOM.render(
  <VirtualScroll
    width={300}
    height={300}
    rowsCount={list.size}
    rowHeight={20}
    rowRenderer={index => list[index]}
  />,
  document.getElementById('example')
);

FlexTable Example

import React from 'react';
import ReactDOM from 'react-dom';
import { FlexTable, FlexColumn } from 'react-virtualized';

// Table data as a array of objects
const list = [
  { name: 'Brian Vaughn', description: 'Software engineer'
  // And so on...
];

// Render your table
ReactDOM.render(
  <FlexTable
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowsCount={list.length}
    rowGetter={index => list[index]}
  >
    <FlexColumn
      label='Name'
      dataKey='name'
      width={100}
    />
    <FlexColumn
      width={200}
      label='Description'
      dataKey='description'
    />
  </FlexTable>,
  document.getElementById('example')
);

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.

About

React components for efficiently rendering large lists and tabular data

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.8%
  • CSS 2.0%
  • HTML 1.2%