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

feat(table): add custom input to header columns #3767

Open
wants to merge 2 commits into
base: 2.x.x
Choose a base branch
from
Open

feat(table): add custom input to header columns #3767

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39d35a3
feat(table): add custom input to header columns
EKong-IBM Apr 5, 2023
0d6c89f
feat(table): table storybook custom input
EKong-IBM Apr 24, 2023
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
3 changes: 3 additions & 0 deletions packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ class FilterHeaderRow extends Component {
),
/** if isMultiselect and isFilterable are true, the table is filtered based on a multiselect */
isMultiselect: PropTypes.bool,
customInput: PropTypes.element,
Copy link
Collaborator

Choose a reason for hiding this comment

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

I suspect we need this to be an elementType so we can pass in a ref.

Suggested change
customInput: PropTypes.element,
customInput: PropTypes. elementType,

Copy link
Collaborator

Choose a reason for hiding this comment

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

We may need to define an onChange handler in the filter object.
OR,
If we keep as an element we can clone the component and add the ref that way. That may be preferable.

})
).isRequired,
/** internationalized string */
Expand Down Expand Up @@ -361,6 +362,8 @@ class FilterHeaderRow extends Component {
const headerContent =
column.isFilterable !== undefined && !column.isFilterable ? (
<div />
) : column.customInput !== undefined ? (
<>{column.customInput}</>
EKong-IBM marked this conversation as resolved.
Show resolved Hide resolved
) : column.options ? (
column.isMultiselect ? (
<FilterableMultiSelect
Expand Down
12 changes: 12 additions & 0 deletions packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,4 +1034,16 @@ describe('FilterHeaderRow', () => {
expect(screen.getByTestId('filter-row-icon')).toBeVisible();
});
});

it('should display custom input when not undefined', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

We should add a test where we use the custom input to ensure that we are able to filter data in the table.

render(
<FilterHeaderRow
{...commonFilterProps}
ordering={[{ columnId: 'col1' }, { columnId: 'col2' }]}
columns={[{ id: 'col1', customInput: 'customInput' }, { id: 'col2' }]}
EKong-IBM marked this conversation as resolved.
Show resolved Hide resolved
/>
);

expect(screen.getAllByText('customInput')[0]).toBeInTheDocument();
});
});
1 change: 1 addition & 0 deletions packages/react/src/components/Table/TableHead/TableHead.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,6 +669,7 @@ const TableHead = ({
isFilterable: !isNil(column.filter),
isMultiselect: column.filter?.isMultiselect,
width: column.width,
customInput: column?.customInput,
Copy link
Collaborator

Choose a reason for hiding this comment

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

I would imagine we would want this to be part of the filter object. Like above on line 670,

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ok that seems to have worked. Thanks 👍

Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
customInput: column?.customInput,
customInput: column.filter?.customInput,

}))}
hasFastFilter={hasFastFilter}
clearFilterText={clearFilterText}
Expand Down