Skip to content

Commit

Permalink
Merge pull request #1243 from pat270/clay-1241
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Oct 26, 2018
2 parents 8142769 + 331bc13 commit 9cd543b
Show file tree
Hide file tree
Showing 3 changed files with 646 additions and 31 deletions.
330 changes: 327 additions & 3 deletions clayui.com/content/docs/css-framework/satellites/tables.md
View file
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

0 comments on commit 9cd543b

Please sign in to comment.