@qoretechnologies/reqore 0.35.3 → 0.36.0

package/src/components/Table/index.tsx

@@ -314,7 +314,7 @@ const ReqoreTable = ({
   const transformedData = useMemo(() => {
     // Filter by global query
     let filteredData = _data.filter((datum) =>
-      JSON.stringify(datum).toLowerCase().includes(query.toLowerCase())
+      JSON.stringify(datum).toLowerCase().includes(query.toString().toLowerCase())
     );
 
     // Filter by column filters
@@ -440,12 +440,7 @@ const ReqoreTable = ({
   }, []);
 
   const columnsList = useMemo(() => {
-    const _columnsList: IReqorePanelSubAction[] = [
-      {
-        divider: true,
-        label: 'Show / hide columns',
-      },
-    ];
+    const _columnsList: IReqorePanelSubAction[] = [];
 
     const addColumn = (column: IReqoreTableColumn) => {
       _columnsList.push({
@@ -471,6 +466,13 @@ const ReqoreTable = ({
       }
     });
 
+    if (count(_columnsList)) {
+      _columnsList.unshift({
+        divider: true,
+        label: 'Show / hide columns',
+      });
+    }
+
     return _columnsList;
   }, [finalColumns]);
 
@@ -494,15 +496,17 @@ const ReqoreTable = ({
   const tableActions = useMemo<IReqorePanelAction[]>(() => {
     const finalActions: IReqorePanelAction[] = [...actions];
 
-    finalActions.push({
-      label: 'Columns',
-      icon: 'LayoutColumnLine',
-      className: 'reqore-table-columns-options',
-      badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
-      intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
-      multiSelect: true,
-      actions: columnsList,
-    });
+    if (count(columnsList)) {
+      finalActions.push({
+        label: 'Columns',
+        icon: 'LayoutColumnLine',
+        className: 'reqore-table-columns-options',
+        badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
+        intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
+        multiSelect: true,
+        actions: columnsList,
+      });
+    }
 
     if (filterable) {
       finalActions.push({

package/src/components/Table/row.tsx

@@ -124,12 +124,18 @@ const ReqoreTableRow = ({
       );
     }
 
-    const content = cell?.content;
+    let content = cell?.content;
 
     if (isFunction(content)) {
-      const Content = content;
+      // Check what type does the content function return
+      if (React.isValidElement(content(data))) {
+        const Content = content;
+        // If it's a react element, return it
+        return <Content {...data} _size={size} _dataId={dataId} />;
+      }
 
-      return <Content {...data} _size={size} _dataId={dataId} />;
+      // If it's a function, call it and return the result
+      content = content(data) as any;
     }
 
     if (isString(content)) {

package/src/components/Table/value.tsx

@@ -0,0 +1,27 @@
+import ReqoreIcon from '../Icon';
+import { ReqoreP } from '../Paragraph';
+
+export interface IReqoreTableValueProps {
+  value?: string | number | boolean | any[] | { [key: string]: any };
+}
+
+export const ReqoreTableValue = ({ value }: IReqoreTableValueProps) => {
+  if (value === undefined || value === null) {
+    return <>-</>;
+  }
+
+  switch (typeof value) {
+    case 'string':
+    case 'number':
+      return <ReqoreP className='reqore-table-text'>{value}</ReqoreP>;
+    case 'boolean':
+      return (
+        <ReqoreIcon
+          icon={value ? 'CheckLine' : 'CloseLine'}
+          intent={value ? 'success' : 'danger'}
+        />
+      );
+    default:
+      return <ReqoreP className='reqore-table-text'>{JSON.stringify(value)}</ReqoreP>;
+  }
+};

package/src/index.tsx

@@ -24,6 +24,7 @@ export {
 } from './components/Header';
 export { default as ReqoreIcon } from './components/Icon';
 export { default as ReqoreInput } from './components/Input';
+export { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from './components/KeyValueTable';
 export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';
@@ -49,6 +50,7 @@ export { default as ReqoreTable } from './components/Table';
 export { ReqoreTableBodyCell } from './components/Table/cell';
 export { ReqoreTableHeaderCell } from './components/Table/headerCell';
 export { default as ReqoreTableRow } from './components/Table/row';
+export { ReqoreTableValue } from './components/Table/value';
 export { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';
 export { default as ReqoreTabsListItem } from './components/Tabs/item';

package/src/stories/KeyValueTable/KeyValueTable.stories.tsx

@@ -0,0 +1,199 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import ReqoreIcon from '../../components/Icon';
+import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
+import {
+  IReqoreTableProps,
+  IReqoreTableRowData,
+  TReqoreTableColumnContent,
+} from '../../components/Table';
+import { TReqorePaginationType } from '../../constants/paging';
+import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreKeyValueTableProps>();
+
+export default {
+  title: 'Collections/Key Value Table/Stories',
+  argTypes: {
+    ...createArg('rounded', {
+      type: 'boolean',
+      name: 'Rounded',
+      description: 'If the table should have rounded corners',
+    }),
+    ...createArg('striped', {
+      type: 'boolean',
+      name: 'Striped',
+      description: 'If the table should have striped rows',
+    }),
+    ...createArg('width', {
+      type: 'number',
+      defaultValue: undefined,
+      name: 'Width',
+      description: 'The width of the table',
+    }),
+    ...createArg('height', {
+      type: 'number',
+      defaultValue: 600,
+      name: 'Height',
+      description: 'The height of the table',
+    }),
+    ...createArg('data', {
+      defaultValue: {
+        firstName: 'Filip',
+        lastName: 'Machinia',
+        age: 25,
+        married: false,
+        'In Relationship': true,
+        DOB: '1995-01-01',
+        occupation: 'Software Engineer',
+        address: {
+          street: 'Some street',
+          city: 'Some city',
+          country: 'Some country',
+        },
+        groups: ['Admin', 'User'],
+        race: 'Human',
+        sex: 'Male',
+        height: 180,
+        weight: 80,
+        device: undefined,
+        OS: 'MacOS',
+        browser: 'Chrome',
+        email: 'test@test.com',
+        phone: '+420 123 456 789',
+        website: 'https://machinia.com',
+        company: 'Machinia',
+      },
+      name: 'Data',
+      description: 'The data to be displayed in the table',
+    }),
+    ...createArg('fill', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'Fill',
+      description: 'Whether the table should fill the parent',
+    }),
+    ...SizeArg,
+    ...FlatArg,
+    ...IntentArg,
+    ...CustomIntentArg('selectedRowIntent'),
+  },
+} as Meta<IReqoreTableProps>;
+
+const Template: Story<IReqoreKeyValueTableProps> = (args) => {
+  return <ReqoreKeyValueTable label='Table' {...args} />;
+};
+
+export const Basic = Template.bind({});
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+  label: undefined,
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  width: 400,
+};
+
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
+};
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true,
+};
+export const Filterable = Template.bind({});
+Filterable.args = {
+  filterable: true,
+};
+export const DefaultFilter = Template.bind({});
+DefaultFilter.args = {
+  filterable: true,
+  filter: 'Mach',
+};
+
+export const DefaultValueFilter = Template.bind({});
+DefaultValueFilter.args = {
+  defaultValueFilter: 80,
+};
+
+export const AllFiltersActive = Template.bind({});
+AllFiltersActive.args = {
+  filterable: true,
+  filter: 1,
+  defaultValueFilter: 80,
+};
+
+export const NoDataMessage = Template.bind({});
+NoDataMessage.args = {
+  filterable: true,
+  filter: 'asjkghakshgjkashg',
+};
+
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  zoomable: true,
+};
+
+export const FillParent = Template.bind({});
+FillParent.args = {
+  fill: true,
+};
+
+export const Sizes = Template.bind({});
+Sizes.args = {
+  size: 'small',
+  filterable: true,
+  wrapperSize: 'big',
+};
+
+export const DefaultPaging = Template.bind({});
+DefaultPaging.args = {
+  paging: 'buttons',
+};
+
+export const CustomColumnWidths = Template.bind({});
+CustomColumnWidths.args = {
+  minValueWidth: 500,
+  maxKeyWidth: 100,
+};
+
+export const CustomKeyIntent = Template.bind({});
+CustomKeyIntent.args = {
+  keyColumnIntent: 'success',
+};
+
+export const CustomAlign = Template.bind({});
+CustomAlign.args = {
+  keyAlign: 'right',
+  valueAlign: 'center',
+};
+
+export const CustomPaging = Template.bind({});
+CustomPaging.args = {
+  paging: {
+    fluid: true,
+    loadMoreLabel: 'Load more rows...',
+    showLabels: true,
+    infinite: true,
+    itemsPerPage: 2,
+  } as TReqorePaginationType<IReqoreTableRowData>,
+};
+
+export const CustomValueRenderer = Template.bind({});
+CustomValueRenderer.args = {
+  valueRenderer: ({ value, tableKey }, Component): TReqoreTableColumnContent | JSX.Element => {
+    switch (tableKey) {
+      case 'race':
+        return 'tag:success';
+      case 'sex':
+        return <ReqoreIcon icon={value === 'Male' ? 'User6Line' : 'User6Fill'} />;
+      case 'height':
+        return <>{value} cm</>;
+      case 'weight':
+        return <Component value={value} />;
+      default:
+        return undefined;
+    }
+  },
+};