Document how to style columns. Stop auto aligning

src/components/Table/Table.stories.svelte

@@ -20,6 +20,8 @@
   import sortDocs from './stories/docs/sort.md?raw';
   // @ts-ignore
   import formatDocs from './stories/docs/format.md?raw';
+  // @ts-ignore
+  import styleDocs from './stories/docs/style.md?raw';
 
   import Table from './Table.svelte';
 
@@ -151,11 +153,22 @@
   args="{{
     data: richestWomen,
     title: 'The Richest Women in the World',
-    source:
-      "Source: <a href='https://www.forbes.com/sites/rachelsandler/2022/04/05/the-top-richest-women-in-the-world-2022/?sh=29c2f69446a8'>Forbes</a>",
+    source: 'Source: Forbes',
     sortable: true,
     sortField: 'Net worth (in billions)',
     sortDirection: 'descending',
     fieldFormatters: { 'Net worth (in billions)': (v) => '$' + v.toFixed(1) },
   }}"
 />
+
+<Story
+  name="Style"
+  {...withStoryDocs(styleDocs)}
+  args="{{
+    id: 'custom-table',
+    data: richestWomen,
+    title: 'The Richest Women in the World',
+    source: 'Source: Forbes',
+  }}"
+  ,
+/>

src/components/Table/Table.svelte

@@ -138,12 +138,7 @@
   import Search from './Search.svelte';
   import Select from './Select.svelte';
   import SortArrow from './SortArrow.svelte';
-  import {
-    filterArray,
-    paginateArray,
-    getOptions,
-    isNumeric,
-  } from './utils.js';
+  import { filterArray, paginateArray, getOptions } from './utils.js';
 
   /** Set truncate, filtering and pagination configuration */
   let showAll = false;
@@ -161,15 +156,6 @@
     ? paginateArray(sortedData, pageSize, pageNumber)
     : sortedData;
 
-  // Estimate the text alignment of our fields. Strings go left. Numbers go right.
-  function getAlignment(value) {
-    return isNumeric(value) ? 'right' : 'left';
-  }
-  const fieldAlignments = includedFields.reduce((acc, cur) => {
-    acc[cur] = getAlignment(data[0][cur]);
-    return acc;
-  }, {});
-
   //* * Handle show all, search, filter, sort and pagination events */
   function toggleTruncate(event) {
     showAll = !showAll;
@@ -282,7 +268,6 @@
                   sortDirection === 'descending'}"
                 data-field="{field}"
                 on:click="{handleSort}"
-                style="text-align: {fieldAlignments[field]}"
               >
                 {field}
                 {#if sortable && sortableFields.includes(field)}
@@ -305,7 +290,6 @@
                   data-row-index="{idx}"
                   data-field="{field}"
                   data-value="{item[field]}"
-                  style="text-align: {fieldAlignments[field]}"
                 >
                   {@html formatValue(item, field)}
                 </td>
@@ -402,9 +386,6 @@
             .table--thead--sortarrow {
               display: inline-block;
               margin: 0 0 0 0.125rem;
-              &.invisible {
-                display: none;
-              }
             }
           }
         }

src/components/Table/stories/docs/format.md

@@ -1,4 +1,4 @@
-Format columns by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
+Format column values by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
 
 Among other things, this feature can be used to provide a unit of measurement with numeric fields.
 

src/components/Table/stories/docs/style.md

@@ -0,0 +1,24 @@
+You can tailor the table's appearance by crafting CSS that targets specific elements.
+
+Like other components, you can apply labels by providing the `id` of `cls` options, which can allow you to make broad changes that remain limited to your element.
+
+Each column has `data-field` attribute that contains the field's name. Use it to apply different styles to different fields. One common use is setting different text alignments on different columns.
+
+```svelte
+<Table
+  id="{'custom-table'}"
+  data="{yourData}"
+  fieldFormatters="{fieldFormatters}"
+  title="{'The Richest Women in the World'}"
+  source="{'Source: Forbes'}"
+/>
+
+<style lang="scss">
+  /* Here we right align the table's numeric column. */
+  #custom-table {
+    [data-field='Net worth (in billions)'] {
+      text-align: right;
+    }
+  }
+</style>
+```

src/components/Table/utils.js

@@ -34,13 +34,3 @@ export function getOptions(data, attr) {
   // Convert the list into Option typed objects ready for our Select component
   return attrList.map((a) => ({ text: a, value: a }));
 }
-
-export function isNumeric(value) {
-  return (
-    typeof value === 'number' ||
-    value instanceof Number ||
-    typeof value === 'bigint' ||
-    value instanceof BigInt ||
-    (typeof value === 'string' && !isNaN(value))
-  );
-}

src/docs/docStyles.scss

@@ -1,6 +1,11 @@
-
 img.feature {
   max-width: 100%;
   margin: 0 auto;
   display: block;
-}
+}
+
+#custom-table {
+  [data-field='Net worth (in billions)'] {
+    text-align: right;
+  }
+}

src/index.js

@@ -28,6 +28,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,
   // @ts-ignore