react-component / table Goto Github PK

Cell Editing is useful.

As the library stands there is no way to control the expanded rows pragmatically (closing the expanded rows externally e.g.).

Do you plan on adding functionalities to allow this or do you rather keep this as internal state to keep the library simple?

增加了 indent 发现无法展开的行和可展开的行差了一个 expandIcon 的宽度，看起来很奇怪，如图 aa 和 ab

要不要为无法展开的行增加一个同等大小的占位符？

When the scroll={{y:300}} is set to the table, and somehow the data is not enough to fullfill it, the height will keep being 300px, with the remaining space in blank empty.

The style height:300 is added to table body when the scroll set, and it's fixed. How about we make it to max-height:300 so it's flexible to support the situation when the data is less than the value?

I made a codePen demo here, you may check the link if it helps, thanks!

const columns = [
    {
        title: '其它',
        children: [
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '住址',
                children: [
                    {
                        title: '街道',
                        dataIndex: 'street',
                        key: 'street',
                    },
                    {
                        title: '小区',
                        children: [
                            {
                                title: '单元',
                                dataIndex: 'building',
                                key: 'building',
                            },
                            {
                                title: '门牌',
                                dataIndex: 'number',
                                key: 'number',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        title: '公司',
        children: [
            {
                title: '地址',
                dataIndex: 'companyAddress',
                key: 'companyAddress',
            },
            {
                title: '名称',
                dataIndex: 'companyName',
                key: 'companyName',
                children: [
                    {
                        title: 'FirstName',
                        dataIndex: 'firstName',
                        key: 'firstName'
                    },
                    {
                        title: 'LastName',
                        dataIndex: 'lastName',
                        key: 'lastName'
                    }
                ]
            },
        ],
    }
];

const columns2 = [
    {
        title: '其它',
        children: [
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '住址',
                //children: [
                //    {
                //        title: '街道',
                //        dataIndex: 'street',
                //        key: 'street',
                //    },
                //    {
                //        title: '小区',
                //        children: [
                //            {
                //                title: '单元',
                //                dataIndex: 'building',
                //                key: 'building',
                //            },
                //            {
                //                title: '门牌',
                //                dataIndex: 'number',
                //                key: 'number',
                //            },
                //        ],
                //    },
                //],
            },
        ],
    },
    {
        title: '公司',
        children: [
            {
                title: '地址',
                dataIndex: 'companyAddress',
                key: 'companyAddress',
            },
            {
                title: '名称',
                dataIndex: 'companyName',
                key: 'companyName',
                children: [
                    {
                        title: 'FirstName',
                        dataIndex: 'firstName',
                        key: 'firstName'
                    },
                    {
                        title: 'LastName',
                        dataIndex: 'lastName',
                        key: 'lastName'
                    }
                ]
            },
        ],
    },
];

First columns is good, but second is wrong.

Have you considered using something like https://github.com/mariocasciaro/object-path to parse dataIndex?

const data = [{
  name: "John", 
  age: 25 , 
  custom: {
    one: 1, 
    two: 2
  }
}]

const columns = [{
  title: "Name",
  dataIndex: "name"
}, {
  title: "Age",
  dataIndex: "age"
}, {
  title: "My custom property one",
  dataIndex: "custom.one"
}, {
  title: "My custom property two",
  dataIndex: "custom.two"
}]

suppose we have three columns:

sort it by "Country", and then "City", "Name", after the sort, the table becomes:

有没有必要在TableRow中使用shallowequal或者immutable.js的is方法来优化表格的性能呢？
比如：

const TableRow = React.createClass({
  ...
  shouldComponentUpdate(nextProps, nextState) {
    return !shallowequal(nextProps, this.props) || !shallowequal(nextState, this.state);
  },

}

如果一个页面的表格有成百上千行，任何一个state或者props改变都会触发每个TableRow的render，这个对整个页面的性能损失是很大的。
所以，有没有必要也对TableRow添加shouldComponentUpdate方法？

使用时发现, 我改变了数据状态 引起 render 渲染 但是在 columns 字段里定义的 render 是不会重新执行的 使用如果要在 table 里实时反应出来 columns 字段必须定义在 render 方法里面 这个问题不知道 不知道大神是怎么解决的

但是写在 render 函数里就 OK 了

现在比较麻烦的地方就是目前因为是用 table 标签实现的，所以 fixed column 的实现比较 tricky。然后导致一些功能比较难实现，比如 #83，然后 fixed column 跟其他功能同时使用的时候也很容易有 bug，比如 ant-design/ant-design#3096 ant-design/ant-design#3190 。

@afc163 觉得怎么样？

我用了一下 paging columns
方法 getMaxColumnsPage 有些问题
发现当 columnsPageSize=2 columnsPageRange= [2, 4]

Math.floor((columnsPageRange[1] - columnsPageRange[0] - 1) / columnsPageSize); // 结果为0

第三列无法显示

我试着更正了一下

Math.floor((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize)

现在项目中的需求：一个辅助表格，不需要表头。这个能否考虑支持？

I am not able to put my own into footer this way.

Is it possible to support drag and drop? I am searching for tree where i can drag a row and drop a row.

可以自定义选中行的样式。

因为用redux数据流的话，action reducer等是分开的，并且是只维护一套state即store，但是如果
我的管理系统用到这个组件的话(基于redux数据流)，我如何整合到我的管理系统里面呢？看了你们官方的antd table 模式跟我们很类型，想请问您们在做这些项目的时候是如何去管理数据流的呢？

• 固定行
  表格上下固定行
  例:
  上: 提示行
  下: 汇总行

It's not clear from the documentation or examples.

I thought there would be a 'onColumnHeaderClick' method or something to hook up some sort logic but doesn't seem to be.

Any pointers or suggestions appreciated.

Currently onRowClick expose Function(record, index), but there should be original click event as third parameter Function(record, index, event).

Example use case is filtering row clicks based on click target.

I can PR this if you agree with this behaviour.

See: 5f1140d#commitcomment-18194616

Use fixed columns instead.

ant-design/ant-design#1265

现在表头已经可以列合并了，不知道有没有考虑过行合并？

我大概看了下代码，感觉按现在的 API 设计通过 rowspan 去做合并会比较难实现，是不是可以参考ag-grid的设计，比如要实现下面这样的表头合并：

可以写成这样：

const columns = [{
  title: '姓名',
  dataIndex: 'name',
}, {
  title: '其它',
  children: [
    {
      title: '年龄',
      dataIndex: 'age',
    }, {
      title: '住址',
      dataIndex: 'address',
    }
  ]
}];

部分列比如 checkbox 需要居中，金额需要向右对齐。

希望table组件可以处理 行的双击事件onRowDbClick

I hope rc-table can deal with 'onRowDbClick' event.

现有逻辑处理是onMouseOver时候触发执行detectScrollTarget ，不能适配移动端事件处理，希望相应处理

http://jspreadsheets.com/

http://zippyui.com/react-datagrid

https://handsontable.com/examples.html?headers

https://www.ag-grid.com/best-react-data-grid/

http://uxco.re/components/table/

http://adazzle.github.io/react-data-grid/

http://allenfang.github.io/react-bootstrap-table/

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

https://reactabular.js.org

https://github.com/tannerlinsley/react-table

https://github.com/react-component/table/blob/master/src/Table.jsx#L55

这里key等于数组的index，如果原来数组中某个元素删除了的时候，就会出现bug。

比如

'use strict';

var React = require('react');
var Table = require('rc-table');

var CheckBox = React.createClass({

  render: function() {
    return (
      <label>
        <input type="checkbox" />
        {this.props.id}
      </label>
    );
  }
});

var MyTable = React.createClass({

  getInitialState: function() {
    return {
      data: this.props.data
    };
  },

  handleClick: function(index) {
    var self = this;
    return function() {
      self.remove(index);
    };
  },

  remove: function(index) {
    var rows = this.state.data;
    rows.splice(index, 1);
    this.setState({
      data: rows
    });
  },

  renderAction: function(o, row, index) {
    return <a href="#" onClick={this.handleClick(index)}>删除</a>;
  },

  render: function() {
    var state = this.state;
    var columns = [
      { title: '表头1', dataIndex: 'a', width: 100, renderer: this.checkbox },
      { title: '表头2', dataIndex: 'b', width: 100},
      { title: '表头3', dataIndex: 'c', width: 200},
      { title: '操作', dataIndex: '', renderer: this.renderAction }
    ];
    return (
      <Table columns={columns} data={state.data} className="table"/>
    );
  },

  checkbox: function(a) {
    return <CheckBox id={a} />;
  }
});

var data = [{a: '123'}, {a: 'cdd', b: 'edd'}, {a: '1333', c: 'eee', d: 2}];

React.render(
  <div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <MyTable data={data} className="table"/>
  </div>,
  document.getElementById('__react-content')
);

这个代码，丢example里，表头1这一列选中checkbox，这时候，把当前这一列删除。

下面一条占据了被删除那一列的位置，这时候key没有改变，CheckBox组件是不会更新。所以下面一列checkbox还是选中状态。

Hi , i am using this component in my react project. i want to know how to make cells editable on double click etc. i should be able to double click modify cell value and save it.

I saw one example for expand and collapse but it works only after render if I am not wrong ( expandedRowKeys={[0,1,2]} )

Actually I want to show all row expanded initially so I tried expandedRowKeys={[0,1,2]} props but it wan't worked.

Then I also tried defaultExpandAllRows={true} but that also not worked.

I can't get it to work when I'm loading data from the backend, on the Tree mode.

I click on a plus sign for an item that has no children, then use onExpand to fetch the children for that record from the server, but by the time the api call returns, the render has completed, so it shows a minus sign with no children.

How can this be improved ?

Hi i was trying to make use subTable example and consume data from spring -rest. my service returns the data in this format.

i followed this example:
https://spring.io/guides/tutorials/react-and-spring-data-rest/

to create a rest data provider and inject its response into rc-table via Axios call.

rest response contains _embedded, _links and i guess rc-table component explicitly looks for "children"
sub element array to render subTable.

how can i translate incoming json response to fit into the world of sub-table example.

现在业务场景有这样的需求，需要通过权限控制某些列的显示隐藏，请问有没有类似的实现方式？
比如在columns下添加hidden配置项等。

请教下，这里貌似没有定义 rowSelection ，我能直接传这个参数么

目前的 onRowClick 粒度控制在整行，但是无法精确到具体的 column 以及 expandIcon 这些更小力度上（需要用户自己根据 SyntheticMouseEvent 来判断

业务场景是，类似 加载树形结构数据 这种，但需要在点击 expandIcon 是加载自己的 children 元素

有无必要给 onRowClick 增加一个参数，来描述具体点击到的 column ？

初步想法是分析 SyntheticMouseEvent.target.attributes 的 react-id 来确定 column，再根据 rc-table 设置的 key 来确定是否是 expandIcon 这些更深层次的 target

@afc163 @benjycui

i am in middle of trying this out . is there any umd build available so that i can directly import it inside <script> tag and make use of it.

好像是中间 table 的 th 高度没有同步到两边的 fixed table

1. When mouse hover a row, I want to render a few buttons(edit/delete) to append to a row cell.

It can be implemented like below.

Change two functions of the file 'TableRow.jsx'

onMouseEnter(event) {
const { onHover, hoverKey, record, index, onRowHover } = this.props;
onHover(true, hoverKey); //it's a inner function
onRowHover(record, index, event);
},

onMouseLeave(event) {
const { onHover, hoverKey, onRowHover } = this.props;
onHover(false, hoverKey);
onRowHover(null, null, event);
},

Right now, rows are expanded/collapsed by toggling display: none via javascript. the display-property can't be animated unfortunately.

a quick win would be to apply css-classes expanded & collapsed instead of setting it via javascript. this way users could add animations themselves by simply overwriting the display: none css with an animation of their choice (e.g. animating the height from 0 to 100% or using some sort of transform)

如果单元格里面的内容是一个很长的英文字符串，中间没有空格等，这个字符串长度超过了 cloumns的定义的width 宽度，表格的列宽度就无法起作用。
后面我在样式中增加了 word-wrap:break-word; 就可以了。

If I update value of some key inside data array, relevant data cell isn't updated with new value.

When I commented out shouldComponentUpdate inside TableCell.jsx everything works just fine.

i am trying to check if component has support for nested rows or has concept of row grouping.
for example i have descriptor row and its value is some of its child rows:

Light Motor Vehicles ----- 9
(-) Car ---- 2
(-) motorcycles --- 3
(-) Add new Row --- 4

similar to what we can do in Excel ?.