From 36ecfbb41f92b5eb7421f80eacd79847eba0848d Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Thu, 5 Dec 2024 15:49:20 +0100
Subject: [PATCH] fix stories

---
 .../src/components/Table/Table.stories.tsx    | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
index c11091c4c4..4fa5c620f6 100644
--- a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
+++ b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
@@ -148,9 +148,13 @@ export const OpenStyle: Story = {
 
 export const Striped: Story = {
   name: 'Striped Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example static striped collection table" isStriped>
+      <Table
+        {...args}
+        aria-label="Example static striped collection table"
+        isStriped
+      >
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -172,9 +176,14 @@ export const Striped: Story = {
 
 export const Compact: Story = {
   name: 'Compact Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example compact data table" isStriped isCompact>
+      <Table
+        {...args}
+        aria-label="Example compact data table"
+        isStriped
+        isCompact
+      >
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -196,9 +205,9 @@ export const Compact: Story = {
 
 export const Link: Story = {
   name: 'Link Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example link data table">
+      <Table {...args} aria-label="Example link data table">
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -224,7 +233,7 @@ export const Sorting: Story = {
    * feature. Reference react-aria docs for more advanced examples:
    * https://react-spectrum.adobe.com/react-aria/useTable.html#sorting.
    */
-  render: () => {
+  render: (args) => {
     const [items, setItems] = useState(rows);
     const [sortDescriptor, setSortDescriptor] = useState({});
 
@@ -249,6 +258,7 @@ export const Sorting: Story = {
 
     return (
       <Table
+        {...args}
         aria-label="Example sortable data table"
         sortDescriptor={sortDescriptor}
         onSortChange={sort}
@@ -276,9 +286,9 @@ export const Sorting: Story = {
 
 export const FixedWidth: Story = {
   name: 'Table with Fixed column width',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example table with nested columns">
+      <Table {...args} aria-label="Example table with nested columns">
         <TableHeader>
           <Column isRowHeader width="100">
             100px
@@ -314,9 +324,9 @@ export const FixedWidth: Story = {
 
 export const NestedHeader: Story = {
   name: 'Table with Nested Columns',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example table with nested columns">
+      <Table {...args} aria-label="Example table with nested columns">
         <TableHeader>
           <Column title="Name">
             <Column isRowHeader>First Name</Column>