@heliux-org/design-system-core 0.0.294-TableTestBuildV2 → 0.0.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heliux-org/design-system-core",
-  "version": "0.0.294-TableTestBuildV2",
+  "version": "0.0.294",
   "description": "Official Heliux design system resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types/index.d.ts",
@@ -298,5 +298,5 @@
       "PR: Icon 💎": "New Icons"
     }
   },
-  "gitHead": "288edf8a483e9c9b3d35ee2a718007ecb569c963"
+  "gitHead": "5341ddbfbf52e32ef2e55c52228e03b1569138b5"
 }

package/src/components/NewTable/__stories__/newTable.mdx

@@ -65,18 +65,29 @@ To enable sorting functionality for your table columns, you can use the `enableS
 
 ## Selectable Rows
 
+`hasSelectableRows` This prop is used for making mutiple rows to be selectable. When enabled, it ensures that mutiple rows can be selected at a time.
+
+`onRowSelectionChange` This prop is used to handle row selections. It triggers a callback when rows are selected, passing the selected rows data so you can perform actions like displaying details or updating the state.
+
 <Canvas>
   <Story of={NewTableStories.SelectableRows} />
 </Canvas>
 
 ## Pre Selected Rows
 
+The `initiallySelectedRowIds` prop is used to preselect the table rows. Its type is `Array of ids`, meaning it will accept an array of ids of the rows you want to pre select when table is rendered.
+
 <Canvas>
   <Story of={NewTableStories.PreSelectedRows} />
 </Canvas>
 
 ## Expandable Content
 
+This example demonstrates how to enable expandable rows in the `NewTable` component using the `isExpandable` and `renderExpandedContent` props.
+
+- **`isExpandable` (type: `boolean`)**: This prop enables rows in the table to be expandable. When set to `true`, rows can be expanded to display additional content.
+- **`renderExpandedContent` (type: `(row: any) => React.ReactNode`)**: This prop defines the additional content to be displayed when a row is expanded. It accepts a function that returns a React node, allowing custom content for each row.
+
 <Canvas>
   <Story of={NewTableStories.ExpandableContent} />
 </Canvas>
@@ -101,24 +112,32 @@ To enable sorting functionality for your table columns, you can use the `enableS
 
 ## Horizontal Scroll
 
+The `size` prop is passed in the column object to set the custom size for that column. Its type is `number`. When the columns width accumulatively increases more than the view width the table becomes horizontally scrollable.
+
 <Canvas>
   <Story of={NewTableStories.HorizontalScroll} />
 </Canvas>
 
 ## Resizable Columns
 
+The `isResizable` prop is passed in the column object to make that column resizzable. Its type is `boolean`. when passed true, the corresponding column becomes resizzable.
+
 <Canvas>
   <Story of={NewTableStories.ResizableColumns} />
 </Canvas>
 
 ## Column Manager
 
+To enable the column manager feature, you can use `columnManager` prop in the `useLeafyGreenTable` hook. The type of `columnManager` is `boolean`. 
+
 <Canvas>
   <Story of={NewTableStories.ColumnManager} />
 </Canvas>
 
 ## With Header
 
+To display the header above the table, you can pass the `header` prop in the NewTable component. The type of `header` is 'React.ReactNode'. This header can have filters like dropdown filter and global filters.
+
 <Canvas>
   <Story of={NewTableStories.WithHeader} />
 </Canvas>
@@ -131,12 +150,16 @@ To enable sorting functionality for your table columns, you can use the `enableS
 
 ## With Pagination
 
+To enable the pagination in the table, you can pass the prop `withPagination: true`.
+
 <Canvas>
   <Story of={NewTableStories.WithPagination} />
 </Canvas>
 
 ## Sticky Columns
 
+The columns of the table can either be left or right sticky. You can pass `sticky` prop in the column object. The value of will be either `left` or `right`.
+
 <Canvas>
   <Story of={NewTableStories.StickyColumns} />
 </Canvas>