@heliux-org/design-system-core 0.0.293 → 0.0.294-TableTestBuild

package/src/components/NewTable/__stories__/NewTable.stories.tsx

@@ -292,7 +292,7 @@ export const WithOptionOnHover: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <Table {...args} table={table} ref={tableContainerRef}>
+    <Table {...args} table={table}>
       <TableHead isSticky>
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<any>) => (
           <HeaderRow key={headerGroup.id}>
@@ -377,7 +377,7 @@ export const WithNoContent: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <Table {...args} table={table} ref={tableContainerRef} 
+    <Table {...args} table={table} 
     emptyTableContent={
       <EmptyState
         title="No data available"
@@ -459,7 +459,7 @@ export const WithGroupHeader: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <Table {...args} table={table} ref={tableContainerRef}>
+    <Table {...args} table={table}>
       <TableHead isSticky>
         {table.getHeaderGroups().map((headerGroup) => (
           <HeaderRow key={headerGroup.id}>
@@ -566,7 +566,6 @@ export const WithInlineEdit: StoryFn<StoryTableProps> = (args) => {
     <Table
       {...args}
       table={table}
-      ref={tableContainerRef}
       data-total-rows={table.getRowModel().rows.length}
     >
       <TableHead>
@@ -637,7 +636,6 @@ export const SortableRows: StoryFn<StoryTableProps> = (args) => {
     <Table
       {...args}
       table={table}
-      ref={tableContainerRef}
       data-total-rows={table.getRowModel().rows.length}
     >
       <TableHead>
@@ -691,7 +689,7 @@ export const SingleSelect: StoryFn<StoryTableProps> = (args) => {
 
   return (
     <>
-      <Table {...args} table={table} ref={tableContainerRef}>
+      <Table {...args} table={table}>
         <TableHead isSticky>
           {table.getHeaderGroups().map((headerGroup) => (
             <HeaderRow key={headerGroup.id}>
@@ -762,7 +760,7 @@ export const SelectableRows: StoryFn<StoryTableProps> = (args) => {
     <>
       <button onClick={logSelectedRows}>Log Selected Rows</button>
 
-      <Table {...args} table={table} ref={tableContainerRef}>
+      <Table {...args} table={table}>
         <TableHead isSticky>
           {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
             <HeaderRow key={headerGroup.id}>
@@ -834,7 +832,7 @@ export const PreSelectedRows: StoryFn<StoryTableProps> = (args) => {
     <>
       <button onClick={logSelectedRows}>Log Selected Rows</button>
 
-      <Table {...args} table={table} ref={tableContainerRef}>
+      <Table {...args} table={table}>
         <TableHead isSticky>
           {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
             <HeaderRow key={headerGroup.id}>
@@ -921,7 +919,7 @@ export const ExpandableContent: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <Table {...args} table={table} ref={tableContainerRef}>
+    <Table {...args} table={table}>
       <TableHead>
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
           <HeaderRow key={headerGroup.id}>
@@ -1032,7 +1030,7 @@ export const ExpandableAndSelectableRows: StoryFn<StoryTableProps> = (args) => {
     <>
       <button onClick={logSelectedRows}>Log Selected Rows</button>
 
-      <Table {...args} table={table} ref={tableContainerRef}>
+      <Table {...args} table={table}>
         <TableHead isSticky>
           {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
             <HeaderRow key={headerGroup.id}>
@@ -1244,7 +1242,6 @@ export const NestedRows: StoryFn<StoryTableProps> = (args) => {
     <Table
       {...args}
       table={table}
-      ref={tableContainerRef}
       data-total-rows={table.getRowModel().rows.length}
     >
       <TableHead>
@@ -1378,7 +1375,6 @@ export const BulkSelection: StoryFn<StoryTableProps> = (args) => {
       <Table
         {...args}
         table={table}
-        ref={tableContainerRef}
         data-total-rows={table.getRowModel().rows.length}
       >
         <TableHead>
@@ -1611,7 +1607,7 @@ export const ResizableColumns: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <Table {...args} table={table} ref={tableContainerRef}>
+    <Table {...args} table={table}>
       <TableHead>
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
           <HeaderRow key={headerGroup.id}>
@@ -1767,7 +1763,7 @@ export const ColumnManager: StoryFn<{}> = (args) => {
 
   return (
     <div style={{ display: "flex" }}>
-      <Table {...args} table={table} ref={tableContainerRef}>
+      <Table {...args} table={table}>
         <TableHead isSticky>
           {table
             .getHeaderGroups()
@@ -2098,7 +2094,6 @@ export const WithHeader: StoryFn<StoryTableProps> = (args) => {
             dropdownFilters={[{ columnName: "status", placeholder: "Status" }]}
           />
         }
-        ref={tableContainerRef}
       >
         <TableHead isSticky>
           {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
@@ -2323,7 +2318,6 @@ export const GlobalFilter: StoryFn<StoryTableProps> = (args) => {
             isFilterableable={true}
           />
         }
-        ref={tableContainerRef}
         withPagination={true}
         paginationProps={{
           numTotalItems: data.length,
@@ -2472,7 +2466,6 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
       <ScrollableContainer allowVerticalScrolling style={{height: "calc(100vh - 90px)"}}>
       <Table
         {...rest}
-        ref={tableContainerRef}
         table={table}
         withPagination={true}
         paginationProps={{
@@ -2772,7 +2765,7 @@ export const StickyColumns: StoryFn<StoryTableProps> = (args) => {
   return (
     <>
       <div style={{width: '100%', height: '80vh'}}>
-        <Table {...args} table={table} ref={tableContainerRef}
+        <Table {...args} table={table}
         header={
           <TableHeader
             isSticky
@@ -2889,6 +2882,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
   const data = useMemo(
     () => [
       {
+        id: "1",
         name: "Name1",
         description: "Description7",
         progress: "Completed",
@@ -2896,6 +2890,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "2",
         name: "Name2",
         description: "Description7",
         progress: "Completed",
@@ -2903,6 +2898,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "3",
         name: "Name3",
         description: "Description8",
         progress: "Pending",
@@ -2910,6 +2906,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "4",
         name: "Name4",
         description: "Description8",
         progress: "Completed",
@@ -2917,6 +2914,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "5",
         name: "Name5",
         description: "Description9",
         progress: "Completed",
@@ -2924,6 +2922,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "6",
         name: "Name6",
         description: "Description9",
         progress: "Completed",
@@ -2931,6 +2930,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "7",
         name: "Name7",
         description: "Description9",
         progress: "Completed",
@@ -2938,6 +2938,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "8",
         name: "Name8",
         description: "Description9",
         progress: "Completed",
@@ -2945,6 +2946,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "9",
         name: "Name9",
         description: "Description10",
         progress: "Pending",
@@ -2952,6 +2954,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "10",
         name: "Name10",
         description: "Description11",
         progress: "Completed",
@@ -2959,6 +2962,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "11",
         name: "Name11",
         description: "Description11",
         progress: "Pending",
@@ -2966,6 +2970,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "12",
         name: "Name1",
         description: "Description7",
         progress: "Completed",
@@ -2973,6 +2978,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "13",
         name: "Name2",
         description: "Description7",
         progress: "Completed",
@@ -2980,6 +2986,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "14",
         name: "Name3",
         description: "Description8",
         progress: "Pending",
@@ -2987,6 +2994,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "15",
         name: "Name4",
         description: "Description8",
         progress: "Completed",
@@ -2994,6 +3002,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "16",
         name: "Name5",
         description: "Description9",
         progress: "Completed",
@@ -3001,6 +3010,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "17",
         name: "Name6",
         description: "Description9",
         progress: "Completed",
@@ -3008,6 +3018,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "18",
         name: "Name7",
         description: "Description9",
         progress: "Completed",
@@ -3015,6 +3026,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "19",
         name: "Name8",
         description: "Description9",
         progress: "Completed",
@@ -3022,6 +3034,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "20",
         name: "Name9",
         description: "Description10",
         progress: "Pending",
@@ -3029,6 +3042,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
       },
       {
+        id: "21",
         name: "Name10",
         description: "Description11",
         progress: "Completed",
@@ -3036,6 +3050,7 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
         assignee: { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
       },
       {
+        id: "22",
         name: "Name11",
         description: "Description11",
         progress: "Pending",
@@ -3057,12 +3072,15 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
   ];
 
   const [filteredData, setFilteredData] = useState(data);
+  const initiallySelectedRowIds = useMemo(() => [1, 6], []);
 
   const table = useLeafyGreenTable<any>({
     containerRef: tableContainerRef,
     data: filteredData,
     columns,
     useVirtualScrolling: true,
+    hasSelectableRows: true,
+    initiallySelectedRowIds
   });
 
   const { rows } = table.getRowModel();
@@ -3112,10 +3130,9 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
                 ]}
                 maxDropdownFilters={3}
                 tableName="with_filters"
-                defaultFiltersValues={defaultFiltersValues}
+                // defaultFiltersValues={defaultFiltersValues}
               />
             }
-            ref={tableContainerRef}
             style={{ width: "100%" }}
           >
             <TableHead isSticky>
@@ -3168,3 +3185,188 @@ export const WithFilters: StoryFn<StoryTableProps> = (args) => {
   );
 };
 
+export const TestingStory: StoryFn<StoryTableProps> = (args) => {
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const columns = useMemo(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        accessorKey: "name",
+        size: 100,
+      },
+      {
+        id: "description",
+        header: "Description",
+        accessorKey: "description",
+        size: 200,
+      },
+      {
+        id: "progress",
+        header: "Progress",
+        accessorKey: "progress",
+        size: 120,
+      },
+      {
+        id: "status",
+        header: "Status",
+        accessorKey: "status",
+        size: 100,
+      },
+      {
+        id: "assignee",
+        header: "Assignee",
+        accessorKey: "assignee",
+        size: 150,
+        cell: (info: { row: { original: { assignee: { leftAvatar: string; label: string; }; }; }; }) => {
+          return (
+            <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+              <img
+                src={info.row.original.assignee.leftAvatar}
+                alt={info.row.original.assignee.label}
+                style={{ width: 20, height: 20, borderRadius: "50%" }}
+              />
+              {info.row.original.assignee.label}
+            </div>
+          );
+        },
+      },
+      {
+        id: "click-me",
+        header: "Click",
+        width: 100,
+        cell: () => {
+          return (
+            <Link
+              onClick={() => {}}
+              text="Click me!"
+              disableNavigation={true}
+            />
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  const generateRandomData = (count: number): Person[] => {
+    const statuses = ['Active', 'Inactive', 'Pending'];
+    const progresses = ['Completed', 'In Progress', 'Not Started'];
+    const assignees = [
+      { value: "Rotem", label: "Rotem Dekel", leftAvatar: person1 },
+      { value: "Hadas", label: "Hadas Farhi", leftAvatar: person2 },
+    ];
+
+    return Array.from({ length: count }, (_, index) => ({
+      name: `Name${index + 1}`,
+      description: `Description${Math.floor(Math.random() * 20) + 1}`,
+      progress: progresses[Math.floor(Math.random() * progresses.length)],
+      status: statuses[Math.floor(Math.random() * statuses.length)],
+      assignee: assignees[Math.floor(Math.random() * assignees.length)],
+    }));
+  };
+
+  const data = useMemo(() => generateRandomData(5000), []);
+  const [filteredData, setFilteredData] = useState(data);
+
+  const table = useLeafyGreenTable<Person>({
+    containerRef: tableContainerRef,
+    data: filteredData,
+    columns,
+    infiniteScrolling: true,
+  });
+
+  const { rows } = table.getRowModel();
+
+  const headerButtons = [
+    <Button
+      key="1"
+      onClick={() => console.log("Clicked button 1")}
+      kind="primary"
+      size="small"
+    >
+      Button 1
+    </Button>,
+    <Button
+      key="2"
+      onClick={() => console.log("Clicked button 2")}
+      kind="secondary"
+      size="small"
+    >
+      Button 2
+    </Button>,
+    <Button
+      key="3"
+      onClick={() => console.log("Clicked button 3")}
+      kind="secondary"
+      size="small"
+    >
+      Button 3
+    </Button>,
+  ];
+
+  return (
+    <div style={{width: "100%"}}>
+      <Box
+        shadow={Box.shadows.XS}
+        rounded={Box.roundeds.MEDIUM}
+        padding={Box.paddings.SMALL}
+        border={Box.borders.DEFAULT}
+        className={"section emptyState"}
+        backgroundColor={Box.backgroundColors.Primary}>
+        <ScrollableContainer allowVerticalScrolling style={{height: "calc(100vh - 90px)"}}>
+          <Table
+            {...args}
+            table={table}
+            style={{width: '100%'}}
+            header={
+              <TableHeader
+                isSticky
+                data={data}
+                onFilteredDataChange={setFilteredData}
+                globalSearch={true}
+                headerButtons={headerButtons}
+                globalFilterColumns={["name", "description"]}
+                dropdownFilters={[{ columnName: "status", placeholder: "Status" }]}
+              />
+            }
+          >
+            <TableHead isSticky>
+              {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
+                <HeaderRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <HeaderCell key={header.id} header={header} align="left">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </HeaderCell>
+                  ))}
+                </HeaderRow>
+              ))}
+            </TableHead>
+            <TableBody>
+              {table.getRowModel().rows.map((row: LeafyGreenTableRow<any>) => {
+                return (
+                  <Row key={row.id} row={row}>
+                    {row.getVisibleCells().map((cell) => {
+                      return (
+                        <Cell key={cell.id} cell={cell}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </Cell>
+                      );
+                    })}
+                  </Row>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </ScrollableContainer>
+      </Box>
+    </div>
+  );
+};

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

@@ -6,7 +6,9 @@ import * as NewTableStories from "./NewTable.stories";
 
 <Meta of={NewTableStories} />
 
-The `NewTable`
+- [Props](#props)
+- [Usage](#usage)
+- [Feedback](#feedback)
 
 ## Component Props
 
@@ -15,3 +17,132 @@ The `NewTable`
 ## Usage Examples
 
 Below are examples demonstrating different configurations of the `NewTable` component.
+
+## With Option On Hover
+
+To show any option on Hover, you can use `hoverIcon` prop in the `useLeafyGreenTable` hook. The type of `hoverIcon` is `React.ReactNode`. 
+
+<Canvas>
+  <Story of={NewTableStories.WithOptionOnHover} />
+</Canvas>
+
+## With No Content
+
+The `emptyTableContent` prop is used to display a message or component when there is no data in the table. Its type is `React.ReactNode`, meaning it can accept any valid React element, such as a string, JSX, or a React component.
+
+<Canvas>
+  <Story of={NewTableStories.WithNoContent} />
+</Canvas>
+
+## With Group Header
+
+<Canvas>
+  <Story of={NewTableStories.WithGroupHeader} />
+</Canvas>
+
+## With Inline Edit
+
+<Canvas>
+  <Story of={NewTableStories.WithInlineEdit} />
+</Canvas>
+
+## Sortable Rows
+
+To enable sorting functionality for your table columns, you can use the `enableSorting` prop in the column object. Set `enableSorting: true` for any column you want to be sortable.
+<Canvas>
+  <Story of={NewTableStories.SortableRows} />
+</Canvas>
+
+## Single Select
+
+`allowSelectSingle` This prop is used for single row selection. When enabled, it ensures that only one row can be selected at a time, automatically deselecting any previously selected row.
+
+`onSelect` This prop is used to handle row selection. It triggers a callback when a row is selected, passing the selected row's data so you can perform actions like displaying details or updating the state.
+ 
+<Canvas>
+  <Story of={NewTableStories.SingleSelect} />
+</Canvas>
+
+## Selectable Rows
+
+<Canvas>
+  <Story of={NewTableStories.SelectableRows} />
+</Canvas>
+
+## Pre Selected Rows
+
+<Canvas>
+  <Story of={NewTableStories.PreSelectedRows} />
+</Canvas>
+
+## Expandable Content
+
+<Canvas>
+  <Story of={NewTableStories.ExpandableContent} />
+</Canvas>
+
+## Expandable and Selectable Rows
+
+<Canvas>
+  <Story of={NewTableStories.ExpandableAndSelectableRows} />
+</Canvas>
+
+## Nested Rows
+
+<Canvas>
+  <Story of={NewTableStories.NestedRows} />
+</Canvas>
+
+## Bulk Selection
+
+<Canvas>
+  <Story of={NewTableStories.BulkSelection} />
+</Canvas>
+
+## Horizontal Scroll
+
+<Canvas>
+  <Story of={NewTableStories.HorizontalScroll} />
+</Canvas>
+
+## Resizable Columns
+
+<Canvas>
+  <Story of={NewTableStories.ResizableColumns} />
+</Canvas>
+
+## Column Manager
+
+<Canvas>
+  <Story of={NewTableStories.ColumnManager} />
+</Canvas>
+
+## With Header
+
+<Canvas>
+  <Story of={NewTableStories.WithHeader} />
+</Canvas>
+
+## Global Filter
+
+<Canvas>
+  <Story of={NewTableStories.GlobalFilter} />
+</Canvas>
+
+## With Pagination
+
+<Canvas>
+  <Story of={NewTableStories.WithPagination} />
+</Canvas>
+
+## Sticky Columns
+
+<Canvas>
+  <Story of={NewTableStories.StickyColumns} />
+</Canvas>
+
+## With Filters
+
+<Canvas>
+  <Story of={NewTableStories.WithFilters} />
+</Canvas>