CODEWITHSUNDEEP
reactjsreact-virtualized
Christopher Francisco
Christopher Francisco

Reputation: 16288

React-virtualized table not rendering as a table

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:

enter image description here

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

Upvotes: 5

Views: 4127

Answers (2)

Filip Grebowski
Filip Grebowski

Reputation: 389

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.

Upvotes: 2

bvaughn
bvaughn

Reputation: 13497

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'

Upvotes: 9

Related Questions