{"action":"closed","issue":{"url":"https://api.github.com/repos/schrodinger/fixed-data-table-2/issues/75","repository_url":"https://api.github.com/repos/schrodinger/fixed-data-table-2","labels_url":"https://api.github.com/repos/schrodinger/fixed-data-table-2/issues/75/labels{/name}","comments_url":"https://api.github.com/repos/schrodinger/fixed-data-table-2/issues/75/comments","events_url":"https://api.github.com/repos/schrodinger/fixed-data-table-2/issues/75/events","html_url":"https://github.com/schrodinger/fixed-data-table-2/issues/75","id":186613315,"number":75,"title":"Resize not working for responsive table","user":{"login":"smaili","id":4451986,"avatar_url":"https://avatars.githubusercontent.com/u/4451986?v=3","gravatar_id":"","url":"https://api.github.com/users/smaili","html_url":"https://github.com/smaili","followers_url":"https://api.github.com/users/smaili/followers","following_url":"https://api.github.com/users/smaili/following{/other_user}","gists_url":"https://api.github.com/users/smaili/gists{/gist_id}","starred_url":"https://api.github.com/users/smaili/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/smaili/subscriptions","organizations_url":"https://api.github.com/users/smaili/orgs","repos_url":"https://api.github.com/users/smaili/repos","events_url":"https://api.github.com/users/smaili/events{/privacy}","received_events_url":"https://api.github.com/users/smaili/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-11-01T18:42:30Z","updated_at":"2016-11-06T22:13:33Z","closed_at":"2016-11-06T22:13:33Z","body":"I'm trying to have both the ability to have a responsive table (grow/shrink based on parent container), as well as the ability to resize any column within the table.  As of right now they seem to be mutually exclusive, i.e., I can do one or the other but not both.\r\n\r\nCode:\r\n\r\n```javascript\r\nconst TextCell = ({rowIndex, data, col}) => (\r\n  <Cell>\r\n    {data[rowIndex][col]}\r\n  </Cell>\r\n);\r\n\r\nTextCell.propTypes = {\r\n  rowIndex: PropTypes.number,\r\n  data: PropTypes.array,\r\n  col: PropTypes.number,\r\n};\r\n\r\nconst layout = {\r\n  columnWidth: 100,\r\n};\r\n\r\nclass MyTable extends Component {\r\n\r\n  static propTypes = {\r\n    labels: PropTypes.array,\r\n    data: PropTypes.array,\r\n    containerWidth: PropTypes.number,\r\n    containerHeight: PropTypes.number,\r\n  }\r\n\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      columnWidths: {},\r\n    };\r\n\r\n    this.onColumnResizeEndCallback = this.onColumnResizeEndCallback.bind(this);\r\n  }\r\n\r\n  onColumnResizeEndCallback(newColumnWidth, columnKey) {\r\n    this.setState(({columnWidths}) => ({\r\n      columnWidths: {\r\n        ...columnWidths,\r\n        [columnKey]: newColumnWidth,\r\n      }\r\n    }));\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      props: {\r\n        labels,\r\n        data,\r\n        containerWidth,\r\n        containerHeight,\r\n      },\r\n      state: {\r\n        columnWidths,\r\n      },\r\n    } = this;\r\n\r\n    return (\r\n        <Table\r\n          rowHeight={80}\r\n          headerHeight={80}\r\n          rowsCount={data.length}\r\n          onColumnResizeEndCallback={this.onColumnResizeEndCallback}\r\n          isColumnResizing={false}\r\n          width={containerWidth}\r\n          height={800}\r\n        >\r\n          {\r\n            labels.map((label, index) => (\r\n              <Column\r\n                key={index}\r\n                columnKey={index}\r\n                header={<Cell>{label}</Cell>}\r\n                cell={<TextCell data={data} col={index} />}\r\n                width={columnWidths[index] || layout.columnWidth}\r\n                flexGrow={1}\r\n                isResizable={true}\r\n              />\r\n            ))\r\n          }\r\n        </Table>\r\n    );\r\n  }\r\n}\r\n\r\nexport default GetContainerDimensions()(MyTable)\r\n```"}}
{"actor":{"display_login":"wcjordan"}}