How to use react-virtualized - 10 common examples

);
  }
}

BpkDataTable.propTypes = {
  ..._omit(Table.propTypes, omittedTableProps),
  rows: PropTypes.arrayOf(Object).isRequired,
  children: hasChildrenOfType(BpkDataTableColumn),
  width: PropTypes.number,
  headerHeight: PropTypes.number,
  className: PropTypes.string,
  defaultColumnSortIndex: PropTypes.number,
};

BpkDataTable.defaultProps = {
  ...Table.defaultProps,
  width: null,
  headerHeight: 60,
  rowHeight: 60,
  gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
  defaultColumnSortIndex: 0,
};

export default BpkDataTable;

render() {
    if (this.props.width !== null) {
      return this.renderTable(this.props.width);
    }

    return (
      
        {({ width }) => this.renderTable(width)}
      
    );
  }
}

BpkDataTable.propTypes = {
  ..._omit(Table.propTypes, omittedTableProps),
  rows: PropTypes.arrayOf(Object).isRequired,
  children: hasChildrenOfType(BpkDataTableColumn),
  width: PropTypes.number,
  headerHeight: PropTypes.number,
  className: PropTypes.string,
  defaultColumnSortIndex: PropTypes.number,
};

BpkDataTable.defaultProps = {
  ...Table.defaultProps,
  width: null,
  headerHeight: 60,
  rowHeight: 60,
  gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
  defaultColumnSortIndex: 0,
};

import {
  AutoSizer,
  List as VirtualList,
  WindowScroller,
  CellMeasurer,
  CellMeasurerCache,
} from 'react-virtualized';
import { CSSTransition } from 'react-transition-group';

import { EventKind } from '../../module/k8s';

// Keep track of seen events so we only animate new ones.
const seen = new Set();
const timeout = { enter: 150 };

const measurementCache = new CellMeasurerCache({
  fixedWidth: true,
  minHeight: 109 /* height of event with a one-line event message on desktop */,
});

class SysEvent extends React.Component {
  shouldComponentUpdate(nextProps: SysEventProps) {
    if (this.props.event.lastTimestamp !== nextProps.event.lastTimestamp) {
      // Timestamps can be modified because events can be combined.
      return true;
    }
    if (_.isEqual(this.props.style, nextProps.style)) {
      return false;
    }
    return true;
  }

const { tbInstance, onItemClick, listItemComponent } = tbProps;

    const { items, hasNextPage } = tbInstance.state.list;

    const loadNextPage = args => {
        const pageToLoad = Math.ceil(args.stopIndex / (tbInstance.state.itemsPerPage - 1)) - 1;
        if (tbInstance.state.isLoading || pageToLoad <= tbInstance.state.page) {
            return;
        }

        tbInstance.api.loadPage(pageToLoad);
    };

    // This cache is enabling better performance when it comes to reload
    // previously loaded items.
    const cache = new CellMeasurerCache({ defaultHeight: 85, fixedWidth: true });
    const noRecordsFound = !hasNextPage && !tbInstance.state.isLoading && items.length === 0;

    // We need a place holder to give user some feedback on what's happening
    const itemCount = tbInstance.state.isLoading || noRecordsFound || hasNextPage ? items.length + 1 : items.length;

    const loadMoreItems = loadNextPage;

    // Every row is loaded except for our Loading/NoRecordsFound indicator.
    const isItemLoaded = index => !hasNextPage || index < items.length;

    const ListItemComponent = listItemComponent ? listItemComponent : TbListItem;

    const rowRenderer = (props: any) => {
        const { index, key, style } = props;
        const row = items[index];
        const itemClickProxy = generateOnRowClickProxy(onItemClick)(row);

orderedSections(sections) {
    const {sortBy, sortDirection} = this.state;

    // map dataKey to an accessor/sort function
    const sortFns = {
      fallback(section) { return section[sortBy]; }
      // grade(section) { return rankedByGradeLevel(section.grade); },
      // school(section) { return section.school.name; },
      // name(section) { return `${section.last_name}, ${section.first_name}`; }
    };
    const sortFn = sortFns[sortBy] || sortFns.fallback;
    const sortedRows = _.sortBy(sections, sortFn);

    // respect direction
    return (sortDirection == SortDirection.DESC) 
      ? sortedRows.reverse()
      : sortedRows;
  }

const sortFns = {
      fallback(student) { return student[sortBy]; },
      
      name(student) { return `${student.last_name}, ${student.first_name}`; },
      school(student) { return shortSchoolName(districtKey, student.school.local_id); },
      grade(student) { return rankedByGradeLevel(student.grade); },
      counselor(student) { return maybeCapitalize(student.counselor); },
      note(student) { return hasNote(student); } ,
      starred(student) { return isStarred(student); }
    };
    const sortFn = sortFns[sortBy] || sortFns.fallback;
    const studentsByName = _.sortBy(students, sortFns.name);
    const sortedRows = _.sortBy(studentsByName, sortFn);

    // respect direction
    return (sortDirection == SortDirection.DESC) 
      ? sortedRows.reverse()
      : sortedRows;
  }

'London No. 1 Anywhere London No. 1 Anywhere London No. 1 Anywhere London No. 1 Anywhere London No. 1 Anywhere London No. 1 Anywhere London No. 1 Anywhere',
  ],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
  ['4', 'Jane', 'Red', 34, 'London No. 1 Anywhere'],
].map(row => [`${row[1]} ${row[2]}`, row[3], row[4]]); // selects data to display

const DATA = data
  .concat(data)
  .concat(data)
  .concat(data);

const cache = new CellMeasurerCache({
  defaultHeight: 36,
});

const FullHeight = styled('div', {height: '100%'});

// eslint-disable-next-line flowtype/no-weak-types
function Virtual(props: any) {
  return (
    
      
        {props.columns.map((column, index) => (
          {column}
        ))}

import React from 'react';
import PropTypes from 'prop-types';
import { Column } from 'react-virtualized';

function DefaultRenderer({ cellData }) {
	return <div>{cellData}</div>;
}
DefaultRenderer.propTypes = {
	cellData: PropTypes.string,
};

export const defaultColumnConfiguration = {
	...Column.defaultProps,
	cellRenderer: DefaultRenderer,
	width: -1,
};

// this is a fake component to be usable in JSX,
// but the element is used as props object internally (VirtualizedList / RV)
export default function Content() {
	return null;
}
Content.displayName = 'Content';
Content.defaultProps = defaultColumnConfiguration;

// BpkDataTableColumn is just a props wrapper since Table only accepts Column children
// BpkDataTable uses BpkDataTableColumn.toColumn to convert BpkDataTableColumn to Columns
const BpkDataTableColumn = () => null;

BpkDataTableColumn.toColumn = (bpkDataTableColumn, key) => {
  const { className, ...rest } = bpkDataTableColumn.props;
  const classNames = [getClassName('bpk-data-table-column')];

  if (className) {
    classNames.push(className);
  }

  return ;
};

BpkDataTableColumn.propTypes = { ...Column.propTypes };
BpkDataTableColumn.defaultProps = {
  ...Column.defaultProps,
  headerRenderer: bpkHeaderRenderer,
};

export default BpkDataTableColumn;

/* eslint-disable react/forbid-foreign-prop-types */
BaseTable.propTypes.children = () => {};
/* eslint-enable */

const StyledTable: React.ComponentType = styled(
  BaseTable,
)``;

type Props = TableProps & {
  hasHorizontalBorder?: boolean,
  striped?: boolean,
};

class SimpleTable extends React.Component {
  static defaultProps = {
    ...BaseTable.defaultProps,
    rowRenderer: defaultRowRenderer,
    headerRowRenderer: defaultHeaderRowRenderer,
    hasHorizontalBorder: false,
    rowHeight: 40,
    striped: true,
    headerHeight: 40,
  };

  static HeaderRowRenderer = defaultHeaderRowRenderer;

  static RowRenderer = defaultRowRenderer;

  render() {
    const {
      hasHorizontalBorder,
      hasVerticalBorder,