@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-table/stories/pds-table.stories.js

@@ -1,44 +1,81 @@
 import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-table'),
   component: 'pds-table',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsTableRowSelected', 'onclick', 'pdsTableSelectAll'],
+  parameters: {},
+  title: 'components/Table',
+  argTypes: {
+    border: {
+      control: { type: 'boolean' },
+      description: 'Adds top and bottom borders to the table head',
+      table: {
+        category: 'Table Head',
+      },
+    },
+    background: {
+      control: { type: 'boolean' },
+      description: 'Adds a subtle background color to the table head',
+      table: {
+        category: 'Table Head',
+      },
+    },
+    rowDividers: {
+      control: { type: 'boolean' },
+      description: 'Adds divider borders between table rows. The last row will not have a bottom border',
+    },
+    disableSelectAll: {
+      control: { type: 'boolean' },
+      description: 'Hides the select-all checkbox in the table header while keeping individual row checkboxes functional. Only applies when selectable is true.',
+    },
+    defaultSortColumn: {
+      control: { type: 'text' },
+      description: 'The name of the column to sort by on initial load. Must match the text content of a sortable column header.',
+      table: {
+        category: 'Sorting',
+      },
+    },
+    defaultSortDirection: {
+      control: { type: 'select' },
+      options: ['asc', 'desc'],
+      description: 'The direction to sort the default column on initial load.',
+      table: {
+        category: 'Sorting',
+      },
     },
   },
-  title: 'components/Table',
 };
 
 const BaseTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  ?disable-select-all=${args.disableSelectAll}
 >
-  <pds-table-head>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
   </pds-table-head>
   <pds-table-body>
-    <pds-table-row value="row1">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="row2">
+    <pds-table-row>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="row3">
+    <pds-table-row>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -46,16 +83,59 @@ const BaseTemplate = (args) => html`
   </pds-table-body>
 </pds-table>`;
 
+const AlignmentTemplate = (args) => html`
+<pds-table
+  ?compact=${args.compact}
+  component-id="${args.componentId}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
+    <pds-table-head-cell cell-align="start">Name</pds-table-head-cell>
+    <pds-table-head-cell cell-align="center">Amount</pds-table-head-cell>
+    <pds-table-head-cell cell-align="end">Status</pds-table-head-cell>
+    <pds-table-head-cell cell-align="justify">Description</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">John Doe</pds-table-cell>
+      <pds-table-cell cell-align="center">$1,234.56</pds-table-cell>
+      <pds-table-cell cell-align="end">Active</pds-table-cell>
+      <pds-table-cell cell-align="justify">This is a longer description that demonstrates justified text alignment in table cells. It shows how text wraps and aligns within the cell boundaries.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Jane Smith</pds-table-cell>
+      <pds-table-cell cell-align="center">$987.65</pds-table-cell>
+      <pds-table-cell cell-align="end">Inactive</pds-table-cell>
+      <pds-table-cell cell-align="justify">Another example of justified text that spans multiple lines to show the alignment behavior in table cells with varying content lengths.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Michael Johnson</pds-table-cell>
+      <pds-table-cell cell-align="center">$2,468.13</pds-table-cell>
+      <pds-table-cell cell-align="end">Pending</pds-table-cell>
+      <pds-table-cell cell-align="justify">Short justified text example.</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
 const ResponsiveTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
 >
-  <pds-table-head>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
@@ -67,9 +147,10 @@ const ResponsiveTemplate = (args) => html`
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Actions</pds-table-head-cell>
   </pds-table-head>
   <pds-table-body>
-    <pds-table-row value="responsive1">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -81,9 +162,17 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Juliett</pds-table-cell>
       <pds-table-cell>Row Item Kilo</pds-table-cell>
       <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
+      <pds-table-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="responsive2">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -95,9 +184,17 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Juliett</pds-table-cell>
       <pds-table-cell>Row Item Kilo</pds-table-cell>
       <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
+      <pds-table-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="responsive3">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -109,20 +206,34 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Juliett</pds-table-cell>
       <pds-table-cell>Row Item Kilo</pds-table-cell>
       <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
+      <pds-table-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
   </pds-table-body>
 </pds-table>`;
 
 const SortableTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  default-sort-column="${args.defaultSortColumn}"
+  default-sort-direction="${args.defaultSortDirection}"
 >
-  <pds-table-head>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <pds-table-head-cell sortable=${args.sortable}>Name</pds-table-head-cell>
     <pds-table-head-cell sortable=${args.sortable}>Email</pds-table-head-cell>
     <pds-table-head-cell sortable=${args.sortable}>Email Marketing</pds-table-head-cell>
@@ -171,12 +282,75 @@ const SortableTemplate = (args) => html`
   </pds-table-body>
 </pds-table>`;
 
+const DefaultSortTemplate = (args) => html`
+<pds-table
+  ?compact=${args.compact}
+  component-id="${args.componentId}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  default-sort-column="${args.defaultSortColumn}"
+  default-sort-direction="${args.defaultSortDirection}"
+>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable>Email</pds-table-head-cell>
+    <pds-table-head-cell sortable>Account</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell>John Doe</pds-table-cell>
+      <pds-table-cell>john.doe@example.com</pds-table-cell>
+      <pds-table-cell>47321</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Jane Smith</pds-table-cell>
+      <pds-table-cell>jane.smith@example.com</pds-table-cell>
+      <pds-table-cell>89654</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Michael Johnson</pds-table-cell>
+      <pds-table-cell>michael.johnson@example.com</pds-table-cell>
+      <pds-table-cell>21578</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Susan Brown</pds-table-cell>
+      <pds-table-cell>susan.brown@example.com</pds-table-cell>
+      <pds-table-cell>63920</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>William Davis</pds-table-cell>
+      <pds-table-cell>william.davis@example.com</pds-table-cell>
+      <pds-table-cell>17436</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
 export const Default = BaseTemplate.bind();
 Default.args = {
   compact: false,
   componentId: 'default',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
+  selectable: false,
+};
+
+export const Alignment = AlignmentTemplate.bind();
+Alignment.args = {
+  compact: false,
+  componentId: 'alignment',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -185,7 +359,10 @@ Compact.args = {
   compact: true,
   componentId: 'compact',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -194,8 +371,24 @@ Selectable.args = {
   compact: false,
   componentId: 'selectable',
   fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: true,
+};
+
+export const DisableSelectAll = BaseTemplate.bind();
+DisableSelectAll.args = {
+  compact: false,
+  componentId: 'selectable-no-select-all',
+  fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: true,
+  disableSelectAll: true,
 };
 
 export const Responsive = ResponsiveTemplate.bind();
@@ -203,7 +396,10 @@ Responsive.args = {
   compact: false,
   componentId: 'responsive',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: true,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -212,7 +408,10 @@ fixedColumn.args = {
   compact: false,
   componentId: 'responsive',
   fixedColumn: true,
+  border: false,
+  background: false,
   responsive: true,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -221,7 +420,203 @@ Sortable.args = {
   compact: false,
   componentId: 'sortable',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: false,
   sortable: true,
+  defaultSortColumn: 'Name',
+  defaultSortDirection: 'asc',
+};
+
+export const DefaultSorting = DefaultSortTemplate.bind();
+DefaultSorting.args = {
+  compact: false,
+  componentId: 'default-sort',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: false,
+  defaultSortColumn: 'Name',
+  defaultSortDirection: 'desc',
+};
+
+export const RowDividers = BaseTemplate.bind();
+RowDividers.args = {
+  compact: false,
+  componentId: 'row-dividers',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: true,
+  selectable: false,
+};
+
+const TruncateTemplate = (args) => html`
+<pds-table
+  component-id="truncate"
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell>Name</pds-table-head-cell>
+    <pds-table-head-cell>Email</pds-table-head-cell>
+    <pds-table-head-cell>Description</pds-table-head-cell>
+    <pds-table-head-cell>Status</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell truncate>jonathan.alexander.bartholomew.iii@longcompanyname.example.com</pds-table-cell>
+      <pds-table-cell truncate>Senior Principal Staff Software Engineer, Platform Infrastructure & Developer Experience</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jane Smith</pds-table-cell>
+      <pds-table-cell truncate>jane@example.com</pds-table-cell>
+      <pds-table-cell truncate>Product Manager</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell truncate>alexandra.rodriguez-fitzgerald@international-enterprise-solutions.co.uk</pds-table-cell>
+      <pds-table-cell truncate>Vice President of Customer Success and Strategic Partnerships, EMEA Region</pds-table-cell>
+      <pds-table-cell>Pending</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over or tab to a truncated cell to see the full content in a tooltip.</pds-text>`;
+
+export const Truncate = TruncateTemplate.bind();
+Truncate.args = {
+  border: true,
+  rowDividers: true,
+};
+
+const ColumnWidthsTemplate = (args) => html`
+<pds-table
+  component-id="column-widths"
+  table-layout="${args.tableLayout}"
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable width="148px">Lifetime value</pds-table-head-cell>
+    <pds-table-head-cell sortable width="134px">Added</pds-table-head-cell>
+    <pds-table-head-cell sortable width="216px">Email marketing</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell>$12,480.00</pds-table-cell>
+      <pds-table-cell>Mar 4, 2024</pds-table-cell>
+      <pds-table-cell>Unsubscribed manually</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Bo Li</pds-table-cell>
+      <pds-table-cell>$0.00</pds-table-cell>
+      <pds-table-cell>Jan 12, 2026</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell>$1,250,300.00</pds-table-cell>
+      <pds-table-cell>Sep 30, 2025</pds-table-cell>
+      <pds-table-cell>Not subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Mia Chen</pds-table-cell>
+      <pds-table-cell>$75.00</pds-table-cell>
+      <pds-table-cell>Jul 1, 2025</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Sort any column: with a fixed table layout, the columns keep their widths whichever rows come first. Set the table layout to auto to compare.</pds-text>`;
+
+export const ColumnWidths = ColumnWidthsTemplate.bind();
+ColumnWidths.args = {
+  border: true,
+  responsive: false,
+  rowDividers: true,
+  tableLayout: 'fixed',
+};
+ColumnWidths.argTypes = {
+  tableLayout: {
+    control: { type: 'select' },
+    options: ['auto', 'fixed'],
+    description: 'Sets how the table sizes its columns. With `fixed`, columns take the `width` set on their `pds-table-head-cell` and ignore their content.',
+  },
+};
+
+const ColumnWidthsResponsiveTemplate = (args) => html`
+<pds-table
+  component-id="column-widths-responsive"
+  table-layout="${args.tableLayout}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable width="148px">Lifetime value</pds-table-head-cell>
+    <pds-table-head-cell sortable width="134px">Added</pds-table-head-cell>
+    <pds-table-head-cell sortable width="216px">Email marketing</pds-table-head-cell>
+    <pds-table-head-cell sortable width="240px">Tags</pds-table-head-cell>
+    <pds-table-head-cell sortable width="180px">Last activity</pds-table-head-cell>
+    <pds-table-head-cell sortable width="160px">Source</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell>$12,480.00</pds-table-cell>
+      <pds-table-cell>Mar 4, 2024</pds-table-cell>
+      <pds-table-cell>Unsubscribed manually</pds-table-cell>
+      <pds-table-cell truncate>Customer, Webinar 2024</pds-table-cell>
+      <pds-table-cell>Opened an email</pds-table-cell>
+      <pds-table-cell>Checkout</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Bo Li</pds-table-cell>
+      <pds-table-cell>$0.00</pds-table-cell>
+      <pds-table-cell>Jan 12, 2026</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+      <pds-table-cell truncate>Lead</pds-table-cell>
+      <pds-table-cell>Signed up</pds-table-cell>
+      <pds-table-cell>Opt-in form</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell>$1,250,300.00</pds-table-cell>
+      <pds-table-cell>Sep 30, 2025</pds-table-cell>
+      <pds-table-cell>Not subscribed</pds-table-cell>
+      <pds-table-cell truncate>Customer, VIP, Coaching</pds-table-cell>
+      <pds-table-cell>Bought an offer</pds-table-cell>
+      <pds-table-cell>Import</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Mia Chen</pds-table-cell>
+      <pds-table-cell>$75.00</pds-table-cell>
+      <pds-table-cell>Jul 1, 2025</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+      <pds-table-cell truncate>Customer</pds-table-cell>
+      <pds-table-cell>Completed a lesson</pds-table-cell>
+      <pds-table-cell>Landing page</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">The column widths add up to more than the container, so the table scrolls horizontally. Name has no width and keeps a 120px minimum.</pds-text>`;
+
+export const ColumnWidthsResponsive = ColumnWidthsResponsiveTemplate.bind();
+ColumnWidthsResponsive.args = {
+  border: true,
+  fixedColumn: false,
+  responsive: true,
+  rowDividers: true,
+  tableLayout: 'fixed',
 };
+ColumnWidthsResponsive.argTypes = ColumnWidths.argTypes;