Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add onColumnClick to Table #1207

Merged
merged 2 commits into from
Oct 3, 2018
Merged

Add onColumnClick to Table #1207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbc383e
add onColumnClick to Table
grahamlyus Sep 4, 2018
995ad02
Add documentation for onColumnClick
grahamlyus Sep 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/Table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ This component expects explicit `width` and `height` parameters.
| height | Number | ✓ | Fixed/available height for out DOM element |
| id | String | | Optional custom id to attach to root `Table` element. |
| noRowsRenderer | Function | | Callback used to render placeholder content when :rowCount is 0 |
| onColumnClick | Function | | Callback invoked when a user clicks on a table column. `({ columnData: any, dataKey: string, event: Event }): void` |
| onHeaderClick | Function | | Callback invoked when a user clicks on a table header. `({ columnData: any, dataKey: string, event: Event }): void` |
| onRowClick | Function | | Callback invoked when a user clicks on a table row. `({ event: Event, index: number, rowData: any }): void` |
| onRowDoubleClick | Function | | Callback invoked when a user double-clicks on a table row. `({ event: Event, index: number, rowData: any }): void` |
Expand Down
24 changes: 24 additions & 0 deletions source/Table/Table.jest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,30 @@ describe('Table', () => {
});
});

describe('onColumnClick', () => {
it('should call :onColumnClick with the correct arguments when a column is clicked', () => {
const onColumnClick = jest.fn();
const rendered = findDOMNode(
render(
getMarkup({
onColumnClick,
}),
),
);
const nameColumn = rendered.querySelector(
'.ReactVirtualized__Table__rowColumn:first-of-type',
);

Simulate.click(nameColumn);

expect(onColumnClick).toHaveBeenCalledTimes(1);
const params = onColumnClick.mock.calls[0][0];
expect(params.dataKey).toEqual('name');
expect(params.columnData.data).toEqual(123);
expect(params.event.type).toEqual('click');
});
});

describe('onHeaderClick', () => {
it('should call :onHeaderClick with the correct arguments when a column header is clicked and sorting is disabled', () => {
const onHeaderClick = jest.fn();
Expand Down
12 changes: 12 additions & 0 deletions source/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ export default class Table extends React.PureComponent {
/** Optional renderer to be used in place of table body rows when rowCount is 0 */
noRowsRenderer: PropTypes.func,

/**
* Optional callback when a column is clicked.
* ({ columnData: any, dataKey: string }): void
*/
onColumnClick: PropTypes.func,

/**
* Optional callback when a column's header is clicked.
* ({ columnData: any, dataKey: string }): void
Expand Down Expand Up @@ -426,6 +432,7 @@ export default class Table extends React.PureComponent {
}

_createColumn({column, columnIndex, isScrolling, parent, rowData, rowIndex}) {
const {onColumnClick} = this.props;
const {
cellDataGetter,
cellRenderer,
Expand All @@ -447,6 +454,10 @@ export default class Table extends React.PureComponent {
rowIndex,
});

const onClick = event => {
onColumnClick && onColumnClick({columnData, dataKey, event});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think its necessary to pass in the event. We should just invoke the callback with columnData and datakey

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, I am not using event in my handlers, but I added it to make it the same callback parameters as onHeaderClick

};

const style = this._cachedColumnStyles[columnIndex];

const title = typeof renderedCell === 'string' ? renderedCell : null;
Expand All @@ -459,6 +470,7 @@ export default class Table extends React.PureComponent {
aria-describedby={id}
className={cn('ReactVirtualized__Table__rowColumn', className)}
key={'Row' + rowIndex + '-' + 'Col' + columnIndex}
onClick={onClick}
role="gridcell"
style={style}
title={title}>
Expand Down