如何将fixed-data-table添加到react.js应用程序中

时间:2015-04-18 14:17:32

标签: javascript node.js reactjs

我想在表格中显示数据,fixed-data-table是完美的。我是react.rs和node.js的新手,但我只是希望能够将fixed-data-table的表呈现给HMTL页面,但是在将它集成到我的示例应用程序时遇到了问题。

我尝试添加fixed-data-table的dist'js'和'css'文件并将其添加到我的'example.js'

var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;

// Table data as a list of array.
var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b3', 'c2'],
  ['a3', 'b3', 'c3']
];

function rowGetter(rowIndex) {
  return rows[rowIndex];
}
React.render(
  <Table
    rowHeight={50}
    rowGetter={rowGetter}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      label="Col 1"
      width={3000}
      dataKey={0}
    />
    <Column
      label="Col 2"
      width={2000}
      dataKey={1}
    />
  </Table>,
  document.getElementById('table')
);

我正在使用来自react.js的教程示例代码开始:

https://github.com/reactjs/react-tutorial

这是fixed-data-table的链接:

https://github.com/facebook/fixed-data-table

1 个答案:

答案 0 :(得分:0)

在这里查看扩展的FixedDataTable https://github.com/cosminnicula/react-ui-components