How to use the react-virtualized.List function in react-virtualized

To help you get started, we’ve selected a few react-virtualized examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ringcentral / ringcentral-js-widgets / components / CallListV2 / index.js View on Github external
value: function render() {
      var _this$props3 = this.props,
          width = _this$props3.width,
          height = _this$props3.height,
          calls = _this$props3.calls,
          className = _this$props3.className;
      return _react["default"].createElement("div", null, _react["default"].createElement(_reactVirtualized.List, {
        style: {
          outline: 'none',
          overflowY: 'auto'
        },
        containerStyle: {
          overflow: 'visible'
        },
        ref: this._list,
        width: width,
        height: height,
        overscanRowCount: 15,
        className: className,
        rowCount: calls.length,
        rowHeight: this._renderRowHeight,
        rowRenderer: this._rowRender,
        noRowsRenderer: this.noRowsRender
github oknosoft / metadata.js / packages / metadata-react-ui / DataField / VirtualizedSelect.js View on Github external
        ({ width }) => _react2.default.createElement(_reactVirtualized.List, _extends({
          className: "VirtualSelectGrid",
          height: height,
          ref: ref => this._virtualScroll = ref,
          rowCount: options.length,
          rowHeight: ({ index }) => this._getOptionHeight({
            option: options[index]
          }),
          rowRenderer: wrappedRowRenderer,
          scrollToIndex: focusedOptionIndex,
          width: width
        }, listProps))
      );
github Raathigesh / majestic / app / src / core / ui / components / Tree.tsx View on Github external
import * as React from 'react';
const ReactVirtualized = require('react-virtualized');
import styled from 'styled-components';
import 'react-virtualized/styles.css';
import { observer } from 'mobx-react';
import { styledComponentWithProps } from '../util/styled';
import { Status } from '../stores/types/JestRepoter';
import { getColorForStatus } from '../theme';
import Node from '../stores/Node';
const { Scrollbars } = require('react-custom-scrollbars');
const { Tooltip } = require('react-tippy');

const ObservedList = observer(ReactVirtualized.List);

const ItemUl = styled.ul`
  padding-left: 15px;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  margin-bottom: '3px';
`;

const ItemSpan = styled.span`
  padding-right: 5px;
  font-size: 13px !important;
`;

const StatusDotElement = styledComponentWithProps<
  {
github ringcentral / ringcentral-js-widgets / components / GlipGroupList / index.js View on Github external
value: function render() {
      var _this$props = this.props,
          groups = _this$props.groups,
          width = _this$props.width,
          height = _this$props.height,
          className = _this$props.className;
      return _react["default"].createElement(_reactVirtualized.List, {
        ref: this._list,
        className: className,
        width: width,
        height: height,
        rowCount: groups.length,
        rowHeight: 75,
        rowRenderer: this._rowRenderer
      });
    }
  }]);