Skip to content

Commit

Permalink
Feat #30 - Add table component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sam-dassana
sam-dassana committed Aug 20, 2020
1 parent f22ce34 commit abe904c
Show file tree
Hide file tree
Showing 7 changed files with 560 additions and 0 deletions.
366 changes: 366 additions & 0 deletions src/__snapshots__/storybook.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,372 @@ exports[`Storyshots Link Default 1`] = `
</a>
`;

exports[`Storyshots Table Default 1`] = `
<div
className="ant-table-wrapper"
>
<div
className="ant-spin-nested-loading"
>
<div
className="ant-spin-container"
>
<div
className="ant-table"
>
<div
className="ant-table-container"
>
<div
className="ant-table-content"
onScroll={[Function]}
style={Object {}}
>
<table
style={
Object {
"tableLayout": "auto",
}
}
>
<colgroup />
<thead
className="ant-table-thead"
>
<tr>
<th
className="ant-table-cell ant-table-column-has-sorters"
colSpan={null}
onClick={[Function]}
rowSpan={null}
style={Object {}}
>
<div
className="ant-table-column-sorters"
>
<span>
First Name
</span>
<span
className="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
className="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
className="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
className="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
</th>
<th
className="ant-table-cell ant-table-column-has-sorters"
colSpan={null}
onClick={[Function]}
rowSpan={null}
style={Object {}}
>
<div
className="ant-table-column-sorters"
>
<span>
Age
</span>
<span
className="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
className="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
className="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
className="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
</th>
<th
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
Address
</th>
</tr>
</thead>
<tbody
className="ant-table-tbody"
>
<tr
className="ant-table-row ant-table-row-level-0"
data-row-key={0}
onClick={[Function]}
style={Object {}}
>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
Dolor Sit
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
30
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
San Francisco
</td>
</tr>
<tr
className="ant-table-row ant-table-row-level-0"
data-row-key={1}
onClick={[Function]}
style={Object {}}
>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
Lorem Ipsum
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
20
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
San Jose
</td>
</tr>
<tr
className="ant-table-row ant-table-row-level-0"
data-row-key={2}
onClick={[Function]}
style={Object {}}
>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
Amet Consectetur
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
35
</td>
<td
className="ant-table-cell"
colSpan={null}
rowSpan={null}
style={Object {}}
>
Sunnyvale
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ul
className="ant-pagination ant-table-pagination ant-table-pagination-right"
style={Object {}}
unselectable="unselectable"
>
<li
aria-disabled={true}
className="ant-pagination-prev ant-pagination-disabled"
onClick={[Function]}
onKeyPress={[Function]}
tabIndex={null}
title="Previous Page"
>
<button
className="ant-pagination-item-link"
disabled={true}
tabIndex={-1}
type="button"
>
<span
aria-label="left"
className="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</button>
</li>
<li
className="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
onClick={[Function]}
onKeyPress={[Function]}
tabIndex="0"
title={1}
>
<a
rel="nofollow"
>
1
</a>
</li>
<li
aria-disabled={true}
className="ant-pagination-next ant-pagination-disabled"
onClick={[Function]}
onKeyPress={[Function]}
tabIndex={null}
title="Next Page"
>
<button
className="ant-pagination-item-link"
disabled={true}
tabIndex={-1}
type="button"
>
<span
aria-label="right"
className="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
`;

exports[`Storyshots Tag Colored 1`] = `
<span
className="ant-tag ant-tag-has-color"
Expand Down
Loading

0 comments on commit abe904c

Please sign in to comment.