@qoretechnologies/reqore 0.35.0 → 0.35.2

package/src/stories/Table/Table.stories.tsx

@@ -3,7 +3,15 @@ import { StyledEffect } from '../../components/Effect';
 import { IReqoreTableColumn, IReqoreTableProps } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
 import { IReqoreCustomHeaderCellProps } from '../../components/Table/header';
-import { ReqoreH3, ReqoreH4, ReqoreIcon, ReqoreP, ReqoreTable, ReqoreTag } from '../../index';
+import {
+  ReqoreH3,
+  ReqoreH4,
+  ReqoreIcon,
+  ReqoreInput,
+  ReqoreP,
+  ReqoreTable,
+  ReqoreTag,
+} from '../../index';
 import tableData from '../../mock/tableData';
 import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
@@ -12,6 +20,7 @@ const { createArg } = argManager<IReqoreTableProps>();
 const defaultColumns: IReqoreTableColumn[] = [
   {
     dataId: 'id',
+    intent: 'info',
     header: {
       label: 'ID',
       tooltip: 'Custom ID tooltip nice',
@@ -29,6 +38,8 @@ const defaultColumns: IReqoreTableColumn[] = [
       columns: [
         {
           dataId: 'firstName',
+          minWidth: 50,
+          maxWidth: 500,
           header: {
             icon: 'SlideshowLine',
             label: 'First Name',
@@ -41,6 +52,12 @@ const defaultColumns: IReqoreTableColumn[] = [
               },
             },
           },
+          cell: {
+            padded: 'none',
+            content: ({ _size, firstName }) => (
+              <ReqoreInput icon='PriceTag2Fill' size={_size} value={firstName} />
+            ),
+          },
           width: 150,
           grow: 2,
         },
@@ -80,6 +97,12 @@ const defaultColumns: IReqoreTableColumn[] = [
       label: 'Really long age header',
       icon: 'User4Line',
       tooltip: 'Custom age tooltip',
+      actions: [
+        {
+          label: 'Do something',
+          icon: 'EBike2Fill',
+        },
+      ],
     },
     width: 100,
     align: 'center',
@@ -138,6 +161,33 @@ const defaultColumns: IReqoreTableColumn[] = [
       }),
     },
   },
+  {
+    dataId: 'actions',
+    header: {
+      icon: 'SettingsLine',
+    },
+    width: 100,
+    align: 'center',
+    pin: 'right',
+
+    cell: {
+      padded: 'none',
+      actions: () => [
+        {
+          icon: 'AddLine',
+          intent: 'info',
+        },
+        {
+          icon: 'EditLine',
+          intent: 'warning',
+        },
+        {
+          icon: 'DeleteBinLine',
+          intent: 'danger',
+        },
+      ],
+    },
+  },
 ];
 
 const defaultColumnsWithFilters = defaultColumns.map((column, index) => {
@@ -192,6 +242,41 @@ const defaultColumnsWithHiddenColumns = defaultColumns.map((column, index) => {
   return column;
 });
 
+const defaultColumnsWithPinnedColumns = defaultColumns.map((column, index) => {
+  if (index === 0) {
+    return {
+      ...column,
+      pin: 'left',
+    };
+  }
+
+  if (index === 1) {
+    return {
+      ...column,
+      header: {
+        ...column.header,
+        columns: column.header.columns.map((subColumn, subIndex) =>
+          subIndex === 1
+            ? {
+                ...subColumn,
+                pin: 'left',
+              }
+            : subColumn
+        ),
+      },
+    };
+  }
+
+  if (index === 3) {
+    return {
+      ...column,
+      pin: 'right',
+    };
+  }
+
+  return column;
+});
+
 export default {
   title: 'Collections/Table/Stories',
   argTypes: {
@@ -310,11 +395,24 @@ HiddenColumns.args = {
   columns: defaultColumnsWithHiddenColumns,
 };
 
+export const PinnedColumns = Template.bind({});
+PinnedColumns.args = {
+  columns: defaultColumnsWithPinnedColumns,
+  zoomable: true,
+  filterable: true,
+};
+
 export const Selectable = Template.bind({});
 Selectable.args = {
   selectable: true,
 };
 
+export const PreselectedRows = Template.bind({});
+PreselectedRows.args = {
+  selected: [274, 280],
+  selectable: true,
+};
+
 export const Zoomable = Template.bind({});
 Zoomable.args = {
   zoomable: true,