Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Table: don't show the sorting arrow when no sorting fn passed #129

Merged
katspaugh merged 1 commit into from
May 5, 2021
Merged

Table: don't show the sorting arrow when no sorting fn passed #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 11 additions & 7 deletions src/dataDisplay/Table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const Table = ({
sortedByHeaderId,
sortDirection,
onRowClick = () => undefined,
onHeaderClick = () => undefined,
onHeaderClick,
}: Props): React.ReactElement => (
<TableContainer component={Paper} elevation={3}>
<TableMui className={className}>
Expand All @@ -123,12 +123,16 @@ export const Table = ({
<TableCell
key={header.id}
align={header.alignment || TableAlignment.left}>
<TableSortLabel
active={sortedByHeaderId === header.id}
direction={sortDirection}
onClick={() => onHeaderClick(header.id)}>
{header.label}
</TableSortLabel>
{onHeaderClick ? (
<TableSortLabel
active={sortedByHeaderId === header.id}
direction={sortDirection}
onClick={() => onHeaderClick(header.id)}>
{header.label}
</TableSortLabel>
) : (
header.label
)}
</TableCell>
))}
</TableRow>
Expand Down
217 changes: 7 additions & 210 deletions tests/__snapshots__/storybook.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6019,144 +6019,28 @@ exports[`Storyshots Data Display/Table Collapsible 1`] = `
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col1
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col1
</th>
<th
aria-sort={null}
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col2
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col2
</th>
<th
aria-sort={null}
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col3
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col3
</th>
<th
aria-sort={null}
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>

<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>

</th>
</tr>
</thead>
Expand Down Expand Up @@ -6373,108 +6257,21 @@ exports[`Storyshots Data Display/Table Simple Table 1`] = `
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col1
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col1
</th>
<th
aria-sort={null}
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col2
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col2
</th>
<th
aria-sort={null}
className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
scope="col"
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiTableSortLabel-root"
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
role="button"
tabIndex={0}
>
col3
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
col3
</th>
</tr>
</thead>
Expand Down