feat: deployable design studio and updated component showcase

app/pages/components/data-table.wrn

@@ -531,7 +531,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="default" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;TeLine truncated
           </div>
           <section class="demo-code" aria-label="Sortable, searchable and paged usage">
@@ -738,7 +738,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="sm" columns="[{&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;From&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Subject&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Folder&quot;, &quot;align&quot;: &quot;center&quot;}, {&quot;key&quot;: &quot;statusHtml&quot;, &quot;label&quot;: &quot;State&quot;, &quot;align&quot;: &quot;center&quot;, &quot;html&quot;: true}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quLine truncated
           </div>
           <section class="demo-code" aria-label="Bulk actions on selection usage">
@@ -968,7 +968,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quLine truncated
           </div>
           <section class="demo-code" aria-label="Numbered pagination usage">
@@ -1176,7 +1176,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-4" class="demo-canvas demo-canvas--4">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;statusHtml&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;, &quot;html&quot;: true}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quLine truncated
           </div>
           <section class="demo-code" aria-label="Full gridlines and custom cell markup usage">
@@ -1386,7 +1386,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-5" class="demo-canvas demo-canvas--5">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true, &quot;width&quot;: &quot;40%&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true, &quot;width&quot;: &quot;20%&quot;}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;align&quot;: &quot;center&quot;, &quot;width&quot;: &quot;20%&quot;}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;end&quot;, &quot;width&quot;: &quot;20%&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;:Line truncated
           </div>
           <section class="demo-code" aria-label="Fixed widths and alignment usage">
@@ -1595,7 +1595,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-6" class="demo-canvas demo-canvas--6">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Plan&quot;}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Tier&quot;}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;type&quot;: &quot;number&quot;}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &qLine truncated
           </div>
           <section class="demo-code" aria-label="Comparison layout usage">
@@ -1802,7 +1802,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-7" class="demo-canvas demo-canvas--7">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quLine truncated
           </div>
           <section class="demo-code" aria-label="Sticky first column usage">
@@ -2010,7 +2010,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-8" class="demo-canvas demo-canvas--8">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quLine truncated
           </div>
           <section class="demo-code" aria-label="Compact density, no pagination usage">
@@ -2221,7 +2221,7 @@ page DataTableDetail {
         <div class="demo-workbench">
           <div id="data-table-demo-9" class="demo-canvas demo-canvas--9">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="35" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="No accounts match this filter yet" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--9" /></div>
           </div>
           <section class="demo-code" aria-label="Empty state usage">