Skip to content

Commit

Permalink
fix(table-header): forward ref for <th> (#4877)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tay1orjones @joshblack
tay1orjones authored and joshblack committed Jan 6, 2020
1 parent 50d0cfa commit f65f115
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 37 deletions.
35 changes: 22 additions & 13 deletions packages/react/src/components/DataTable/TableHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,20 @@ const sortDirections = {
[sortStates.DESC]: 'descending',
};

const TableHeader = ({
className: headerClassName,
children,
isSortable,
isSortHeader,
onClick,
scope,
sortDirection,
translateWithId: t,
...rest
}) => {
const TableHeader = React.forwardRef(function TableHeader(
{
className: headerClassName,
children,
isSortable,
isSortHeader,
onClick,
scope,
sortDirection,
translateWithId: t,
...rest
},
ref
) {
if (!isSortable) {
return (
<th {...rest} className={headerClassName} scope={scope}>
Expand All @@ -76,7 +79,11 @@ const TableHeader = ({
const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];

return (
<th scope={scope} className={headerClassName} aria-sort={ariaSort}>
<th
scope={scope}
className={headerClassName}
aria-sort={ariaSort}
ref={ref}>
<button className={className} onClick={onClick} {...rest}>
<span className={`${prefix}--table-header-label`}>{children}</span>
<Arrow
Expand All @@ -100,7 +107,7 @@ const TableHeader = ({
</button>
</th>
);
};
});

TableHeader.propTypes = {
/**
Expand Down Expand Up @@ -158,4 +165,6 @@ TableHeader.defaultProps = {

TableHeader.translationKeys = Object.values(translationKeys);

TableHeader.displayName = 'TableHeader';

export default TableHeader;
48 changes: 24 additions & 24 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
>
<TableHead>
<TableRow>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -71,8 +71,8 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -81,7 +81,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down Expand Up @@ -334,7 +334,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
>
<TableHead>
<TableRow>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -343,8 +343,8 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -353,7 +353,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down Expand Up @@ -851,7 +851,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
name="select-all"
onSelect={[Function]}
/>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -860,8 +860,8 @@ exports[`DataTable selection should have select-all default to un-checked if no
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -870,7 +870,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down Expand Up @@ -1178,7 +1178,7 @@ exports[`DataTable selection should render 1`] = `
name="select-all"
onSelect={[Function]}
/>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -1187,8 +1187,8 @@ exports[`DataTable selection should render 1`] = `
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -1197,7 +1197,7 @@ exports[`DataTable selection should render 1`] = `
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down Expand Up @@ -1863,7 +1863,7 @@ exports[`DataTable should render 1`] = `
>
<TableHead>
<TableRow>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -1872,8 +1872,8 @@ exports[`DataTable should render 1`] = `
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -1882,7 +1882,7 @@ exports[`DataTable should render 1`] = `
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down Expand Up @@ -2838,7 +2838,7 @@ exports[`DataTable sticky header should render 1`] = `
>
<TableHead>
<TableRow>
<TableHeader
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -2847,8 +2847,8 @@ exports[`DataTable sticky header should render 1`] = `
translateWithId={[Function]}
>
Field A
</TableHeader>
<TableHeader
</ForwardRef(TableHeader)>
<ForwardRef(TableHeader)
isSortHeader={false}
isSortable={false}
onClick={[Function]}
Expand All @@ -2857,7 +2857,7 @@ exports[`DataTable sticky header should render 1`] = `
translateWithId={[Function]}
>
Field B
</TableHeader>
</ForwardRef(TableHeader)>
</TableRow>
</TableHead>
<TableBody
Expand Down

0 comments on commit f65f115

Please sign in to comment.