-
-
Notifications
You must be signed in to change notification settings - Fork 413
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.
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
header clickable even if no data #699
Conversation
@jbetancur Can you take a look to this PR ? |
@mathieupetrini thanks for the PR. Sorry for the delay as I have been quite busy. So are you proposing to remove disabling the header and just disable to individual TableCols? Curious if there a specific use case that led to this? |
The goal of this PR is to remove disabling the header when there is any data. The purpose is to keep filter include in header available to be changed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few comments on naming. Also, we also need a snapshot test for this case scenario. Give the test a shot otherwise I can add it later.
Need to make test snapshot
Codecov Report
@@ Coverage Diff @@
## master #699 +/- ##
=========================================
Coverage ? 99.38%
=========================================
Files ? 43
Lines ? 489
Branches ? 137
=========================================
Hits ? 486
Misses ? 3
Partials ? 0
Continue to review full report at Codecov.
|
I had a snapshot test. I'm not sure about is quality if you can give a look. Thanks for reviewing |
|
||
const mock = dataMock({ | ||
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events | ||
name: (<div id="testColName" onClick={functionHadToBeClicked}>Test</div>), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is the name block is needed or funcitonHadtoBeClicked? You just need to mock someone attempting to click the cell when data is 0 or prrogresspending is true
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
these are the tests you need
test('should not call onSort if progressPending true', () => {
const onSortMock = jest.fn();
const mock = dataMock({ sortable: true });
const { container } = render(
<DataTable
data={mock.data}
columns={mock.columns}
onSort={onSortMock}
persistTableHead
progressPending
/>,
);
fireEvent.click(container.querySelector('div[id="column-some.name"]'));
expect(onSortMock).not.toBeCalled();
});
and
test('should not call onSort if data is empty []', () => {
const onSortMock = jest.fn();
const mock = dataMock({ sortable: true });
const { container } = render(
<DataTable
data={[]}
columns={mock.columns}
onSort={onSortMock}
persistTableHead
/>,
);
fireEvent.click(container.querySelector('div[id="column-some.name"]'));
expect(onSortMock).not.toBeCalled();
});
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there any update on this feature. This would be very helpful. |
how to make the columns header clickable for sorting |
Any updates on this? @jbetancur if you still interested on a use case for this, we are developing a multi table component to which you can pass single tables as child.
The Multi table has a header that controls sorting for all of the child tables. That header is actually an empty data table. So in this case the sorting buttons are disabled, therefore can't sort the children tables data. |
/inactive |
Related to #612