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 all commits
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
220 changes: 218 additions & 2 deletions packages/react/src/components/PageTitleBar/__snapshots__/PageTitleBar.story.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -914,6 +914,69 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</svg>
</button>
</th>
<th
aria-sort="none"
className="table-header-label-start iot--table-head--table-header table-header-sortable"
data-testid="null-table-head-column-customInput"
scope="col"
style={
Object {
"width": undefined,
}
}
>
<button
align="start"
className="table-header-label-start iot--table-head--table-header table-header-sortable bx--table-sort"
data-column="customInput"
data-floating-menu-container={true}
id="column-customInput"
onClick={[Function]}
>
<span
className="bx--table-header-label"
>
<span
className=""
title="Custom Input"
>
Custom Input
</span>
</span>
<svg
aria-label="Sort rows by this header in ascending order"
className="bx--table-sort__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.7 6.7L7.5 2.9 7.5 15 8.5 15 8.5 2.9 12.3 6.7 13 6 8 1 3 6z"
/>
</svg>
<svg
aria-label="Sort rows by this header in ascending order"
className="bx--table-sort__icon-unsorted"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
/>
</svg>
</button>
</th>
<th
className="iot--table-header-row-action-column"
data-testid="null-table-head-row-actions-column"
Expand Down Expand Up @@ -1293,7 +1356,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</div>
</th>
<th
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width"
data-column="object"
scope="col"
>
Expand Down Expand Up @@ -1338,6 +1401,17 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</div>
</div>
</th>
<th
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
data-column="customInput"
scope="col"
>
<div
className="bx--table-header-label"
>
<div />
</div>
</th>
<th
className="iot--filter-header-row--header"
scope="col"
Expand Down Expand Up @@ -1656,6 +1730,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</span>
</span>
</td>
<td
align="start"
className="data-table-start"
data-column="customInput"
data-offset={0}
id="cell-table-12-row-1-customInput"
offset={0}
>
<span
className="iot--table__cell__offset"
style={
Object {
"--row-nesting-offset": "0px",
}
}
/>
</td>
<td
className="iot--row-actions-cell--table-cell"
>
Expand Down Expand Up @@ -2057,6 +2148,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</span>
</span>
</td>
<td
align="start"
className="data-table-start"
data-column="customInput"
data-offset={0}
id="cell-table-12-row-4-customInput"
offset={0}
>
<span
className="iot--table__cell__offset"
style={
Object {
"--row-nesting-offset": "0px",
}
}
/>
</td>
<td
className="iot--row-actions-cell--table-cell"
>
Expand Down Expand Up @@ -3160,6 +3268,69 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</svg>
</button>
</th>
<th
aria-sort="none"
className="table-header-label-start iot--table-head--table-header table-header-sortable"
data-testid="null-table-head-column-customInput"
scope="col"
style={
Object {
"width": undefined,
}
}
>
<button
align="start"
className="table-header-label-start iot--table-head--table-header table-header-sortable bx--table-sort"
data-column="customInput"
data-floating-menu-container={true}
id="column-customInput"
onClick={[Function]}
>
<span
className="bx--table-header-label"
>
<span
className=""
title="Custom Input"
>
Custom Input
</span>
</span>
<svg
aria-label="Sort rows by this header in ascending order"
className="bx--table-sort__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.7 6.7L7.5 2.9 7.5 15 8.5 15 8.5 2.9 12.3 6.7 13 6 8 1 3 6z"
/>
</svg>
<svg
aria-label="Sort rows by this header in ascending order"
className="bx--table-sort__icon-unsorted"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
/>
</svg>
</button>
</th>
<th
className="iot--table-header-row-action-column"
data-testid="null-table-head-row-actions-column"
Expand Down Expand Up @@ -3539,7 +3710,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</div>
</th>
<th
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width"
data-column="object"
scope="col"
>
Expand Down Expand Up @@ -3584,6 +3755,17 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</div>
</div>
</th>
<th
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
data-column="customInput"
scope="col"
>
<div
className="bx--table-header-label"
>
<div />
</div>
</th>
<th
className="iot--filter-header-row--header"
scope="col"
Expand Down Expand Up @@ -3902,6 +4084,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</span>
</span>
</td>
<td
align="start"
className="data-table-start"
data-column="customInput"
data-offset={0}
id="cell-table-13-row-1-customInput"
offset={0}
>
<span
className="iot--table__cell__offset"
style={
Object {
"--row-nesting-offset": "0px",
}
}
/>
</td>
<td
className="iot--row-actions-cell--table-cell"
>
Expand Down Expand Up @@ -4303,6 +4502,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
</span>
</span>
</td>
<td
align="start"
className="data-table-start"
data-column="customInput"
data-offset={0}
id="cell-table-13-row-4-customInput"
offset={0}
>
<span
className="iot--table__cell__offset"
style={
Object {
"--row-nesting-offset": "0px",
}
}
/>
</td>
<td
className="iot--row-actions-cell--table-cell"
>
Expand Down
Loading