标签: fixed-data-table

我已经整理了网格的工作示例,并希望将IconMenu添加到网格的每一行的列中.我看到了图标按钮,但是当我点击它时,我没有看到菜单.下面是网格的代码.

有没有人设法使用来自material-ui的IconMenu 固定数据表？

require('fixed-data-table/dist/fixed-data-table.css');

var React = require('react');
var PropTypes = React.PropTypes;
var FixedDataTable = require('fixed-data-table');
var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;

// Material-UI
let MenuItem = require('material-ui/lib/menus/menu-item');
let IconMenu = require('material-ui/lib/menus/icon-menu');
let IconButton = require('material-ui/lib/icon-button');
let Colors = require('material-ui/lib/styles/colors');
let MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');

function cellMenuRenderer(cellData, key, rowData, rowIndex, columnData, width) {
    let button = (
        <IconButton
            touch={true}
            tooltip='Click to see menu.'
            tooltipPosition='bottom-left'>
            <MoreVertIcon color={Colors.grey400} />
        </IconButton>
    );
    return (
        <IconMenu iconButtonElement={button}>
            <MenuItem primaryText="Edit" …

我在fixed-data-table-2组件中使用扩展行.我在内表上有3个级别:

如果我单击内部表(第二个嵌套级别)中的折叠单元格,则行不会展开,并且不会渲染最后一个嵌套表格.它在首次单击父行后发生,但在第二次单击后,将呈现该表.

更奇怪的是,如果a)我单击第二个表的前三行或b)如果我展开main(first)表中的第一行,则不会发生这种情况

如果扩展主表的第一行以外,它会发生在第二个表的最后一行.

你可以看到这种行为这个和这个记录.

codesandbox

CollapseCell.jsx

import React from 'react';
import { Cell } from 'fixed-data-table-2';

const { StyleSheet, css } = require('aphrodite');

export default class CollapseCell extends React.PureComponent {
  render() {
    const {
      data, rowIndex, columnKey, collapsedRows, callback, ...props
    } = this.props;
    return (
      <Cell {...props} className={css(styles.collapseCell)}>
        <a onClick={evt => callback(rowIndex)}>{collapsedRows.has(rowIndex) ? '\u25BC' : '\u25BA'}</a>
      </Cell>
    );
  }
}

const styles = StyleSheet.create({
  collapseCell: {
    cursor: 'pointer',
  },
});

TestMeet.jsx

import React, …

定义固定数据表时,使用rowHeight属性指定行高.但是通过设置静态值(例如,50像素高),如果其内容cell太大,则会因为明确设置高度而被切断.我看到有一个rowHeightGetter回调函数,但该函数的参数似乎没有任何相关性(也许它可能是它得到的行？哪种有意义,但没有关于特定列的数据或cell).

所以我很好奇,有没有办法让它cell(甚至有点)响应它包含的数据？

var Table = FixedDataTable.Table,
  Column = FixedDataTable.Column,
  Cell = FixedDataTable.Cell;

var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={500}
    height={500}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 …

我在我的项目中使用固定数据网格.

https://facebook.github.io/fixed-data-table/example-sort.html

我想采用csv和pdf报告.是否可以直接将网格数据导出为pdf或csv？或者,如何使用datagrid的数据提供程序(JSON数组)获取csv和pdf报告？

rowspan固定数据表中是否有类似内容，以便我可以合并单元格。

或任何其他方式来获得如下表

给定的数据是

data = [
     {
        name: "John",
        expenses:{
           q1: 20,
           q2: 30,
           q3: 30,
           q4: 20
        }
     },
     {
        name: "Jane",
        expenses: {
           q1: 10,
           q2: 10,
           q3: 10,
           q4: 10
        }
     }
]

我想尝试遵循这个ReactJS教程:

第1部分:http://4dev.tech/2015/12/reactjs-datatable-with-sort-filter-and-pagination-example-part-1/

第2部分:http://4dev.tech/2016/03/tutorial-sorting-and-filtering-a-reactjs-datatable/

我成功完成了第1部分,我需要一些帮助来完成第2部分.

这是我的第2部分的代码:

import React from 'react';
import {Table, Column, Cell} from 'fixed-data-table';

class MyTable extends React.Component {

  constructor(props) {
    super(props);
      this.rows = [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
             "country":"Argentina","ip_address":"247.180.226.89"},
              {"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
             "country":"South Africa","ip_address":"27.146.70.36"},
              {"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
             "country":"Colombia","ip_address":"103.52.74.225"},
             ]
    this.state = {
      filteredDataList: this.rows
    };
  }

_renderHeader(label, cellDataKey) {
  return <div>
        <span>{label}</span>
          <div>
            <br />
            <input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
          </div>
      </div>;
}

_onFilterChange(cellDataKey, event) {
  if (!event.target.value) {
    this.setState({
      filteredDataList: this.rows,
    });
  }
  var filterBy = event.target.value.toString().toLowerCase();
  var size = this.rows.length;
  var filteredList = …

我正在尝试使用fixed-data-table的示例,并将其与webpack捆绑在一起.

我正在使用babel-loader和我的代码,否则捆绑没有问题.

webpack根据我的知识运行指向错误的是ES6语法(不是ES5)的一部分... ...,例如:

render() { var {sortDir, children, ...props} = this.props;

在...props具体.

这是我的webpack配置:

"use strict";

var webpack = require("webpack");

module.exports = {
    entry: {
        app: './app.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis", "chart.js"],
    },
    output: { path: "./", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ] …