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

Fixes #1241 - Table List added .table-row-start, .table-row-end, .table-cell-start, .table-cell-end to style cells that are on the edges of the table #1243

Merged
merged 4 commits into from
Oct 26, 2018
Merged

Fixes #1241 - Table List added .table-row-start, .table-row-end, .table-cell-start, .table-cell-end to style cells that are on the edges of the table #1243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e0849a
Fixes #1241 - Table List added `.table-row-start`, `.table-row-end`, …
pat270 Oct 17, 2018
6d0c826
Test site added test cases for .table-row-start|end .table-cell-start…
pat270 Oct 17, 2018
55e3a25
#1241 - Table added support for `.table-cell-start` and `.table-cell-…
pat270 Oct 25, 2018
331bc13
(clayui.com) Satellite Components Tables added docs for utilities `.t…
pat270 Oct 25, 2018
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
330 changes: 327 additions & 3 deletions clayui.com/content/docs/css-framework/satellites/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1398,16 +1398,340 @@ title: "Tables"

### Vertical Alignment

<p>We have added some classes to help vertically align contents inside a table. Use the <code>table-valign-bottom</code>, <code>table-valign-middle</code>, and <code>table-valign-top</code> classes on <code>```<table>```</code> to vertically align table cell contents on the bottom, middle, and top, respectively.</p>
<p>We have added some classes to help vertically align contents inside a table. Use the <code>table-valign-bottom</code>, <code>table-valign-middle</code>, and <code>table-valign-top</code> classes on <code>&lt;table&gt;</code> to vertically align table cell contents on the bottom, middle, and top, respectively.</p>

<p>Use the <code>thead-valign-bottom</code>, <code>thead-valign-middle</code>, and <code>thead-valign-top</code> classes on <code>```<table>```</code> to vertically align the contents inside the table head.</p>
<p>Use the <code>thead-valign-bottom</code>, <code>thead-valign-middle</code>, and <code>thead-valign-top</code> classes on <code>&lt;table&gt;</code> to vertically align the contents inside the table head.</p>

<p>Use the <code>tbody-valign-bottom</code>, <code>tbody-valign-middle</code>, and <code>tbody-valign-top</code> classes on <code>```<table>```</code> to vertically align the contents inside the table body.</p>
<p>Use the <code>tbody-valign-bottom</code>, <code>tbody-valign-middle</code>, and <code>tbody-valign-top</code> classes on <code>&lt;table&gt;</code> to vertically align the contents inside the table body.</p>

### Table Column Text-{start|center|end}

<p>We have added some classes to help horizontally align contents inside a table column. The <code>table-column-text-start</code>, <code>table-column-text-center</code>, and <code>table-column-text-end</code> classes align text left, center, and right, respectively.</p>

### Table Cell-{start|end}

<p>Sometimes we are unable to remove specific table columns from the DOM and need to hide it using CSS. The classes <code>table-cell-start</code> and <code>table-cell-end</code> can be added to the "new" first or last column to maintain table styles on the left and right side.</p>

<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr>
<th class="d-none"></th>
<th class="table-cell-expand table-cell-start table-head-title">
<span class="inline-item inline-item-before">
<a href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-drag">
<use xlink:href="/images/icons/icons.svg#drag" />
</svg>
</a>
</span><a class="inline-item text-truncate-inline" href="#1"><span class="text-truncate" title="Title">Title</span><span class="inline-item inline-item-after">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
<use xlink:href="/images/icons/icons.svg#order-arrow-up" />
</svg>
</span>
</a>
</th>
<th><span class="inline-item">Status</span></th>
<th><span class="inline-item">Items</span></th>
<th><span class="inline-item">Start Date</span></th>
<th><span class="inline-item">Duration</span></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider">
<td colspan="8">In Progress</td>
</tr>
<tr>
<td class="d-none">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand table-cell-start">
<div class="autofit-row">
<div class="autofit-col">
<span class="sticker sticker-circle sticker-danger">MT</span>
</div>
<div class="autofit-col autofit-col-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate" title="Publication Title">Publication Title</span>
</a>
</div>
</div>
</div>
</td>
<td>
<span class="label label-warning">
<span class="label-item label-item-expand">In Progress</span>
</span>
</td>
<td>100,000</td>
<td>2017.11.24 - 17:15</td>
<td>4 minutes</td>
<td class="table-cell-end">
<div class="progress-group">
<div class="progress">
<div aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 30%;"></div>
</div>
<div class="progress-group-addon">30%</div>
</div>
</td>
<td class="d-none">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
<use xlink:href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
<use xlink:href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
<use xlink:href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1">Remove</a></li>
<li><a class="dropdown-item" href="#1">Download</a></li>
<li><a class="dropdown-item" href="#1">Checkout</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>

```html
<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr>
<th class="d-none"></th>
<th class="table-cell-start"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider"></tr>
<tr>
<td class="d-none"></td>
<td class="table-cell-start"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="table-cell-end"></td>
<td class="d-none"></td>
</tr>
</tbody>
</table>
</div>
```

### Table Row-{start|end}

<p>The same is true for table rows, the classes <code>table-row-start</code> and <code>table-row-end</code> can be added to the "new" first or last <code>&lt;tr&gt;</code> to maintain table styles on the top and bottom sides.</p>

<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr class="d-none">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table-row-start">
<th class="d-none"></th>
<th class="table-cell-expand table-cell-start table-head-title">
<span class="inline-item inline-item-before">
<a href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-drag">
<use xlink:href="/images/icons/icons.svg#drag" />
</svg>
</a>
</span><a class="inline-item text-truncate-inline" href="#1"><span class="text-truncate" title="Title">Title</span><span class="inline-item inline-item-after">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
<use xlink:href="/images/icons/icons.svg#order-arrow-up" />
</svg>
</span>
</a>
</th>
<th><span class="inline-item">Status</span></th>
<th><span class="inline-item">Items</span></th>
<th><span class="inline-item">Start Date</span></th>
<th><span class="inline-item">Duration</span></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider">
<td colspan="8">In Progress</td>
</tr>
<tr class="table-row-end">
<td class="d-none">
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand table-cell-start">
<div class="autofit-row">
<div class="autofit-col">
<span class="sticker sticker-circle sticker-danger">MT</span>
</div>
<div class="autofit-col autofit-col-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate" title="Publication Title">Publication Title</span>
</a>
</div>
</div>
</div>
</td>
<td>
<span class="label label-warning">
<span class="label-item label-item-expand">In Progress</span>
</span>
</td>
<td>100,000</td>
<td>2017.11.24 - 17:15</td>
<td>4 minutes</td>
<td class="table-cell-end">
<div class="progress-group">
<div class="progress">
<div aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 30%;"></div>
</div>
<div class="progress-group-addon">30%</div>
</div>
</td>
<td class="d-none">
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
<use xlink:href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
<use xlink:href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
<use xlink:href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1">Remove</a></li>
<li><a class="dropdown-item" href="#1">Download</a></li>
<li><a class="dropdown-item" href="#1">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr class="d-none">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

```html
<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr class="d-none">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table-row-start">
<th class="d-none"></th>
<th class="table-cell-start"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider"></tr>
<tr class="table-row-end">
<td class="d-none"></td>
<td class="table-cell-start"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="table-cell-end"></td>
<td class="d-none"></td>
</tr>
<tr class="d-none">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
```

### Table

<div class="alert alert-warning">
Expand Down
Loading