React-virtualized table not rendering as a table

Question

I have a super basic example that I wrote based on the demo, and it's not working:

import React from 'react';
import {
  Table,
  Column,
} from 'react-virtualized'

function MyTable(props) {
  return (
    <Table
      width={ 900 }
      height={ 500 }
      headerHeight={ 30 }
      rowHeight={ 30 }
      rowCount={ props.list.length }
      rowGetter={ ({ index }) => props.list[index] }
    >
      <Column
        width={ 250 }
        dataKey={ 'id' }
        headerRenderer={ ({ dataKey }) => 'Id' }
      />
      <Column
        width={ 250 }
        dataKey={ 'title' }
        headerRenderer={ ({ dataKey }) => 'Title' }
      />
    </Table>
  );
}

This is the result:

I'm sure I must be missing something, what am I missing, why is it not displaying as a table?

score 9 · Accepted Answer · answered Mar 07 '18 at 20:54

You aren't importing CSS. The Table component is the only component that requires CSS to style the flexbox layout.

Check out the docs:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css'

// You can import any component you want as a named export from 'react-virtualized', eg
import { Column, Table } from 'react-virtualized'

thank god!! I spent 1 hour on this. – Tony Lucas Apr 01 '23 at 12:09 — Tony Lucas, Apr 01 '23 at 12:09

score 2 · Answer 2 · answered Dec 21 '18 at 22:38

If you want you can also provide your own styles for the table. In the css that you link back to your class as an import, you can define the react-virtualize built-in classes like so:

:global {
  .ReactVirtualized__Table {

  }

  .ReactVirtualized__Table__headerColumn {

  }

  .ReactVirtualized__Table__headerRow {

  }

  .ReactVirtualized__Table__row {

  }

  .ReactVirtualized__Table__rowColumn {

  }
}

I would recommend using flex to manipulate the table look. Hope that helps.

React-virtualized table not rendering as a table

2 Answers2