Merge pull request #422 from pchemguy/table-overflow

Added "overflow" attribute to the "table" component

Author: lovasoa

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -592,6 +592,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('striped_columns', 'Whether to add zebra-striping to any table column.', 'BOOLEAN', TRUE, TRUE),
     ('hover', 'Whether to enable a hover state on table rows.', 'BOOLEAN', TRUE, TRUE),
     ('border', 'Whether to draw borders on all sides of the table and cells.', 'BOOLEAN', TRUE, TRUE),
+    ('overflow', 'Whether to to let "wide" tables overflow across the right border and enable browser-based horizontal scrolling.', 'BOOLEAN', TRUE, TRUE),
     ('small', 'Whether to use compact table.', 'BOOLEAN', TRUE, TRUE),
     ('description','Description of the table content and helps users with screen readers to find a table and understand what it’s.','TEXT',TRUE,TRUE),
     -- row level

sqlpage/templates/table.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
+<div class="card my-2 {{class}}" {{#if overflow}}style="width: fit-content;"{{/if}} {{#if id}}id="{{id}}"{{/if}}>
     <div class="card-body">
         <div class="table-responsive" {{#if (or sort search)}}data-pre-init="table"{{/if}}>
             {{#if search}}