[AAE-17258] Update storybook for datatable and datacolumn (#9052)

* [AAE-17258] Datatable storybook - add boolean type

* [AAE-17258] Datatable storybook - Repair location column

* [AAE-17258] Update location column - storybook

* [AAE-17258] Add boolean column and update data mapping - storybook

* [AAE-17258] Add some comments

* [AAE-17258] Storybook - add image column

* [AAE-17258] Add missing props for DataColumn

* [AAE-17258] Update storybook over the amount column type

* [AAE-17258] Add number column to the Storybook

* [AAE-17258] Storybook simplify json column

* [AAE-17258] Stroybook DataColum refactor

* [AAE-17258] Storybook DataColumn refactor

* [AAE-17258] Update DataColumn with date type

* [AAE-17258] Update Datatable over timeAgo column - Storybook

* [AAE-17258] Small changes

* [AAE-17258] Storybook - simplify DataColumn stories and allow for row updates

lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts

@@ -22,6 +22,7 @@ import { DataTableModule } from '../../datatable.module';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { mockPathInfos } from '../mocks/datatable.mock';
 
 export default {
     component: DataTableComponent,
@@ -67,88 +68,63 @@ export default {
                     iconCol: 'folder_open',
                     dateCol: new Date(),
                     fileSizeCol: '536870912',
-                    locationCol: '/path/to/location-link',
+                    locationCol: mockPathInfos[0],
-                    jsonCol: {
+                    booleanCol: true,
-                        id: 1,
+                    amountCol: 100.55,
-                        textCol: 'Text 1',
+                    numberCol: 10000.31,
-                        imageCol: 'material-icons://folder_open',
+                    jsonCol: mockPathInfos[0]
-                        iconCol: 'folder_open',
-                        dateCol: new Date(),
-                        fileSizeCol: '536870912',
-                        locationCol: '/path/to/location-link'
-                    }
                 },
                 {
                     id: 2,
                     textCol: 'Text 2',
                     imageCol: 'material-icons://cloud_outline',
                     iconCol: 'cloud_outline',
-                    dateCol: new Date(),
+                    dateCol: new Date().setDate(new Date().getDate() - 1),
                     fileSizeCol: '524288',
-                    locationCol: { name: '/path/to/location-link' },
+                    locationCol: mockPathInfos[1],
-                    jsonCol: {
+                    booleanCol: false,
-                        id: 2,
+                    amountCol: 1020.123,
-                        textCol: 'Text 2',
+                    numberCol: 240.3,
-                        imageCol: 'material-icons://cloud_outline',
+                    jsonCol: mockPathInfos[1]
-                        iconCol: 'cloud_outline',
-                        dateCol: new Date(),
-                        fileSizeCol: '524288',
-                        locationCol: '/path/to/location-link'
-                    }
                 },
                 {
                     id: 3,
                     textCol: 'Text 3',
                     imageCol: 'material-icons://save',
                     iconCol: 'save',
-                    dateCol: new Date(),
+                    dateCol: new Date().setDate(new Date().getDate() - 5),
                     fileSizeCol: '10737418240B',
-                    locationCol: '/path/to/location-link',
+                    locationCol: mockPathInfos[1],
-                    jsonCol: {
+                    booleanCol: 'true',
-                        id: 3,
+                    amountCol: -2020,
-                        textCol: 'Text 3',
+                    numberCol: 120,
-                        imageCol: 'material-icons://save',
+                    jsonCol: mockPathInfos[1]
-                        iconCol: 'save',
-                        dateCol: new Date(),
-                        fileSizeCol: '10737418240B',
-                        locationCol: '/path/to/location-link'
-                    }
                 },
                 {
                     id: 4,
                     textCol: 'Text 4',
                     imageCol: 'material-icons://delete',
                     iconCol: 'delete',
-                    dateCol: new Date(),
+                    dateCol: new Date().setDate(new Date().getDate() - 6),
                     fileSizeCol: '512B',
-                    locationCol: '/path/to/location-link',
+                    locationCol: mockPathInfos[2],
-                    jsonCol: {
+                    booleanCol: 'false',
-                        id: 4,
+                    amountCol: 230.76,
-                        textCol: 'Text 4',
+                    numberCol: 3.032,
-                        imageCol: 'material-icons://delete',
+                    jsonCol: mockPathInfos[2]
-                        iconCol: 'delete',
-                        dateCol: new Date(),
-                        fileSizeCol: '512B',
-                        locationCol: '/path/to/location-link'
-                    }
                 },
                 {
                     id: 5,
                     textCol: 'Text 5',
                     imageCol: 'material-icons://person_outline',
                     iconCol: 'person_outline',
-                    dateCol: new Date(),
+                    dateCol: new Date().setDate(new Date().getDate() - 7),
                     fileSizeCol: '1073741824B',
-                    locationCol: '/path/to/location-link',
+                    locationCol: mockPathInfos[0],
-                    jsonCol: {
+                    booleanCol: 'false',
-                        id: 5,
+                    amountCol: 0.444,
-                        textCol: 'Text 5',
+                    numberCol: 2000,
-                        imageCol: 'material-icons://person_outline',
+                    jsonCol: mockPathInfos[0]
-                        iconCol: 'person_outline',
-                        dateCol: new Date(),
-                        fileSizeCol: '1073741824B',
-                        locationCol: '/path/to/location-link'
-                    }
                 }
             ],
             table: {
@@ -177,8 +153,12 @@ export default {
                 { type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
                 { type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
                 { type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
+                { type: 'date', key: 'dateCol', title: 'Date Time Ago Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', dateConfig: { format: 'timeAgo' } },
                 { type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
-                { type: 'location', format: '/somewhere', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
+                { type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
+                { type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
+                { type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
+                { type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
                 { type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
             ],
             table: {
@@ -383,7 +363,7 @@ export default {
             table: { category: 'Actions' }
         }
     }
-} as Meta;
+} as Meta<DataTableComponent>;
 
 const insertContentToTemplate = (content: string): string => (
     `<adf-datatable

lib/core/src/lib/datatable/components/mocks/datatable.mock.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { PathInfo } from '@alfresco/js-api';
 import { DataColumn } from '../../data/data-column.model';
 
 export const mockCarsData: any = [
@@ -129,3 +130,29 @@ export const mockCarsSchemaDefinition: DataColumn[] = [
         draggable: true
     }
 ];
+
+export const mockPathInfos: PathInfo[] = [
+    {
+        elements: [
+            { id: '1', name: 'User files', nodeType: 'folder' },
+            { id: '2', name: 'Favorite', nodeType: 'folder' },
+            { id: '3', name: 'Movies', nodeType: 'folder' }
+        ],
+        name: '/User files/Favorite/Movies'
+    },
+    {
+        elements: [
+            { id: '1', name: 'User files', nodeType: 'folder' },
+            { id: '4', name: 'Photos', nodeType: 'folder' }
+        ],
+        name: '/User files/Photos'
+    },
+    {
+        elements: [
+            { id: '1', name: 'User files', nodeType: 'folder' },
+            { id: '2', name: 'Favorite', nodeType: 'folder' },
+            { id: '5', name: 'Series', nodeType: 'folder' }
+        ],
+        name: '/User files/Favorite/Series'
+    }
+];

lib/core/src/lib/datatable/data-column/data-column.component.stories.ts

@@ -19,7 +19,7 @@ import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { DataColumnComponent } from './data-column.component';
 import { DataTableModule } from '../datatable.module';
 import { CoreStoryModule } from '../../testing/core.story.module';
-import * as data from '../../mock/data-column.mock';
+import * as mockData from '../../mock/data-column.mock';
 import { RouterTestingModule } from '@angular/router/testing';
 import { DataRow } from '../index';
 
@@ -114,23 +114,8 @@ export default {
         },
         format: {
             description:
-                'Value format (if supported by the parent component), for example format of the date.',
+                'Used for location type. Setups root path for router navigation.',
-            control: { type: 'select', disable: true },
+            control: { type: 'text', disable: true },
-            options: [
-                'medium',
-                'short',
-                'long',
-                'full',
-                'shortDate',
-                'mediumDate',
-                'longDate',
-                'fullDate',
-                'shortTime',
-                'mediumTime',
-                'longTime',
-                'fullTime',
-                'timeAgo'
-            ],
             table: {
                 category: 'Component Inputs',
                 type: {
@@ -240,12 +225,24 @@ export default {
         },
         type: {
             description:
-                'Value type for the column. Possible settings are `text`, `image`, `date`, `fileSize`, `location`, and `json`.',
+                'Value type for the column. Possible settings are: `text`, `icon`, `image`, `date`, `fileSize`, `location`, `boolean`, `amount`, `number` and `json`.',
-            control: { disable: true },
+            control: { type: 'select', disable: false },
+            options: [
+                'text',
+                'icon',
+                'image',
+                'date',
+                'fileSize',
+                'location',
+                'boolean',
+                'amount',
+                'number',
+                'json'
+            ],
             table: {
                 category: 'Component Inputs',
                 type: {
-                    summary: 'string'
+                    summary: 'DataColumnType'
                 },
                 defaultValue: {
                     summary: 'text'
@@ -253,36 +250,68 @@ export default {
             },
             defaultValue: 'text'
         },
-        data: {
+        currencyConfig: {
-            description: 'Provides data for DataTable component',
+            description:
-            control: { disable: true },
+                `The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
-            mapping: {
+            control: { type: 'object', disable: true },
-                text: data.dataText,
-                icon: data.dataIcon,
-                file: data.dataSizeInBytes
-            },
             table: {
-                category: 'Components data',
+                category: 'Component Inputs',
                 type: {
-                    summary: 'ObjectDataTableAdapter'
+                    summary: 'CurrencyConfig'
+                },
+                defaultValue: {
+                    summary: `{ code: 'USD', display: 'symbol' }`
                 }
+            },
+            defaultValue: {
+                code: 'USD',
+                display: 'symbol',
+                digitsInfo: undefined,
+                locale: undefined
             }
         },
-        columns: {
+        decimalConfig: {
-            description: 'Provides columns for DataTable component',
+            description:
-            control: { disable: true },
+                `The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
+            control: { type: 'object', disable: true },
             table: {
-                category: 'Components data',
+                category: 'Component Inputs',
                 type: {
-                    summary: 'array'
+                    summary: 'DecimalConfig'
+                },
+                defaultValue: {
+                    summary: `{}`
                 }
+            },
+            defaultValue: {
+                digitsInfo: '2.4-5',
+                locale: undefined
+            }
+        },
+        dateConfig: {
+            description:
+                `The dateConfig input allows you to configure date formatting and localization for a component.`,
+            control: { type: 'object', disable: true },
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'DateConfig'
+                },
+                defaultValue: {
+                    summary: `{ format: 'medium', tooltipFormat: 'medium' }`
+                }
+            },
+            defaultValue: {
+                format: 'medium',
+                tooltipFormat: 'medium',
+                locale: undefined
             }
         },
         rows: {
             description: 'Provides rows for DataTable component',
-            control: { disable: true },
+            control: { disable: false },
             table: {
-                category: 'Components data',
+                category: 'Component data',
                 type: {
                     summary: 'array'
                 }
@@ -292,116 +321,183 @@ export default {
 } as Meta;
 
 const formatCustomTooltip = (row: DataRow): string =>
-    row ? row.getValue('id') + ' by formatCustomTooltip' : null;
+    row ? 'This is ' + row.getValue('firstname') : null;
 
-const template: Story<DataColumnComponent> = (
+const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
-    args: DataColumnComponent & { columns: any; rows: any; data: any }
-) => ({
     props: args,
     template: `
-        ${
+        <adf-datatable [rows]="rows">
-            args.columns && args.rows
+            <data-columns>
-                ? '<adf-datatable [columns]="columns' +
+                <data-column 
-                  (args.type === 'date' ? '()' : '') +
+                    [key]="key" 
-                  '" [rows]="rows">'
+                    [type]="type"
-                : '<adf-datatable [data]="data">'
+                    [title]="title"
-        }
+                    [editable]="editable"
-        <data-columns>
+                    [sortable]="sortable"
-            <data-column [key]="key" [type]="type"
+                    [draggable]="draggable"
-            title="${args.title}"
+                    [copyContent]="copyContent"
-            [editable]="${args.editable}"
+                    [format]="format"
-            [sortable]="${args.sortable}"
+                    [isHidden]="isHidden"
-            [draggable]="${args.draggable}"
+                    [class]="cssClass"
-            [copyContent]="${args.copyContent}"
+                    [sr-title]="srTitle"
-            format="${args.format}"
+                    [currencyConfig]="currencyConfig"
-            [isHidden]="${args.isHidden}"
+                    [decimalConfig]="decimalConfig"
-            class="${args.cssClass}"
+                    [dateConfig]="dateConfig"
-            sr-title="${args.srTitle}"
+                    [formatTooltip]="formatTooltip">
-            [formatTooltip]="formatTooltip">
+                </data-column>
-            </data-column>
+            </data-columns>
-        </data-columns>
+        </adf-datatable>
-    </adf-datatable>`
+    `
 });
 
-export const textColumn = template.bind({});
+// Text Column
+export const textColumn: Story = template.bind({});
 textColumn.args = {
-    data: 'text',
+    rows: mockData.textColumnRows,
-    key: 'id',
+    key: 'firstname',
     type: 'text',
     title: 'Text Column'
 };
 
-export const iconColumn = template.bind({});
+// Text Column With Custom Tooltip
+export const textColumnWithCustomTooltip: Story = template.bind({});
+textColumnWithCustomTooltip.argTypes = {
+    formatTooltip: { control: { disable: false } }
+};
+textColumnWithCustomTooltip.args = {
+    rows: mockData.textColumnRows,
+    key: 'firstname',
+    type: 'text',
+    title: 'Custom Tooltip Column',
+    formatTooltip: formatCustomTooltip
+};
+
+// Icon Column
+export const iconColumn: Story = template.bind({});
 iconColumn.argTypes = {
     copyContent: { control: { disable: true } }
 };
 iconColumn.args = {
-    data: 'icon',
+    rows: mockData.iconColumnRows,
     key: 'icon',
     type: 'icon',
     title: 'Icon Column'
 };
 
-export const dateColumn = template.bind({});
+// Image Column
+export const imageColumn: Story = template.bind({});
+imageColumn.argTypes = {
+    copyContent: { control: { disable: true } }
+};
+imageColumn.args = {
+    rows: mockData.imageColumnRows,
+    key: 'image',
+    type: 'image',
+    title: 'Image Column'
+};
+
+// Date Column
+export const dateColumn: Story = template.bind({});
 dateColumn.argTypes = {
-    format: { control: { disable: false } },
-    title: { control: { disable: true } },
     copyContent: { control: { disable: true } },
-    sortable: { control: { disable: true } },
+    dateConfig: { control: { disable: false } }
-    draggable: { control: { disable: true } },
-    isHidden: { control: { disable: true } }
 };
 dateColumn.args = {
-    data: undefined,
+    rows: mockData.dateColumnRows,
-    format: 'medium',
+    key: 'createdOn',
-    columns() {
+    type: 'date',
-        return [{ ...data.dateColumns, format: this.format }];
+    title: 'Date Column'
-    },
-    rows: data.dateRows,
-    key: 'id',
-    type: 'date'
 };
 
-export const fileColumn = template.bind({});
+// Date Column Time Ago
-fileColumn.argTypes = {
+export const dateColumnTimeAgo: Story = template.bind({});
+dateColumnTimeAgo.argTypes = {
+    copyContent: { control: { disable: true } },
+    dateConfig: { control: { disable: false } }
+};
+dateColumnTimeAgo.args = {
+    rows: mockData.dateColumnTimeAgoRows,
+    key: 'modifiedOn',
+    type: 'date',
+    title: 'Date Column Time Ago',
+    dateConfig: { format: 'timeAgo' }
+};
+
+// File Size Column
+export const fileSizeColumn: Story = template.bind({});
+fileSizeColumn.argTypes = {
     copyContent: { control: { disable: true } }
 };
-fileColumn.args = {
+fileSizeColumn.args = {
-    data: 'file',
+    rows: mockData.fileSizeColumnRows,
     key: 'size',
     type: 'fileSize',
-    title: 'File Column'
+    title: 'File Size Column'
 };
 
-export const locationColumn = template.bind({});
+// Location Column
+export const locationColumn: Story = template.bind({});
 locationColumn.argTypes = {
-    copyContent: { control: { disable: true } }
+    copyContent: { control: { disable: true } },
+    format: { control: { disable: false }},
+    sortable: { control: { disable: true }}
 };
 locationColumn.args = {
-    columns: data.locationColumns,
+    rows: mockData.locationColumnRows,
-    rows: data.locationRows,
+    format: '/files',
-    key: 'id',
+    key: 'path',
     type: 'location',
     title: 'Location Column'
 };
 
-export const jsonColumn = template.bind({});
+// Boolean Column
+export const booleanColumn: Story = template.bind({});
+booleanColumn.argTypes = {
+    copyContent: { control: { disable: true } }
+};
+booleanColumn.args = {
+    rows: mockData.booleanColumnRows,
+    key: 'bool',
+    type: 'boolean',
+    title: 'Boolean Column'
+};
+
+// Json Column
+export const jsonColumn: Story = template.bind({});
 jsonColumn.argTypes = {
     editable: { control: { disable: false } },
     copyContent: { control: { disable: true } }
 };
 jsonColumn.args = {
-    data: 'text',
+    rows: mockData.jsonColumnRows,
-    key: 'id',
+    key: 'rowInfo',
     type: 'json',
     title: 'JSON Column'
 };
 
-export const customTooltipColumn = template.bind({});
+// Amount Column
-customTooltipColumn.args = {
+export const amountColumn: Story = template.bind({});
-    data: 'text',
+amountColumn.argTypes = {
-    key: 'id',
+    copyContent: { control: { disable: true } },
-    type: 'text',
+    currencyConfig: { control: { disable: false } }
-    title: 'Custom Tooltip Column',
-    formatTooltip: formatCustomTooltip
 };
+amountColumn.args = {
+    rows: mockData.amountColumnRows,
+    key: 'price',
+    type: 'amount',
+    title: 'Amount Column'
+};
+
+// Number Column
+export const numberColumn: Story = template.bind({});
+numberColumn.argTypes = {
+    decimalConfig: { control: { disable: false } },
+    copyContent: { control: { disable: true } }
+};
+numberColumn.args = {
+    rows: mockData.amountColumnRows,
+    key: 'price',
+    type: 'number',
+    title: 'Number Column'
+};
+

lib/core/src/lib/datatable/data-column/data-column.component.ts

@@ -19,6 +19,7 @@
 
 import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
 import { DataColumnType } from '@alfresco/adf-extensions';
+import { CurrencyConfig, DateConfig, DecimalConfig } from '../data/data-column.model';
 
 @Component({
     selector: 'data-column',
@@ -106,6 +107,18 @@ export class DataColumnComponent implements OnInit {
     @Input()
     order?: number;
 
+    /** Allows you to customize the formatting and display of currency values within the component. */
+    @Input()
+    currencyConfig?: CurrencyConfig;
+
+    /** The decimalConfig input allows you to customize the formatting and display of decimal values within the component. */
+    @Input()
+    decimalConfig?: DecimalConfig;
+
+    /** The decimalConfig input allows you to customize the formatting and display of decimal values within the component. */
+    @Input()
+    dateConfig?: DateConfig;
+
     /** Data column header template */
     header?: TemplateRef<any>;
 

lib/core/src/lib/mock/data-column.mock.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter';
 import { DataColumn } from '../datatable/data/data-column.model';
+import { mockPathInfos } from '../datatable/components/mocks/datatable.mock';
 
 export const getDataColumnMock = <T = unknown>(
     column: Partial<DataColumn<T>> = {}
@@ -41,49 +41,79 @@ export const getDataColumnMock = <T = unknown>(
     ...column
 });
 
-export const dataText = new ObjectDataTableAdapter([
+export const textColumnRows = [
-    { id: '1 first' },
+    { firstname: 'John' },
-    { id: '2 second' },
+    { firstname: 'Henry' },
-    { id: '3 third' }
+    { firstname: 'David' },
-]);
+    { firstname: 'Thomas' }
+];
 
-export const dateRows = [
+export const dateColumnRows = [
     { createdOn: new Date(2016, 6, 1, 11, 8, 4) },
     { createdOn: new Date(2018, 4, 3, 12, 8, 4) },
     { createdOn: new Date(2021, 2, 3, 9, 8, 4) }
 ];
 
-export const dateColumns = {
+const aMinuteInMilliseconds = 60 * 1000;
-    type: 'date',
+const anHourInMilliseconds = 60 * aMinuteInMilliseconds;
-    key: 'createdOn',
+const aDayInMilliseconds = 24 * anHourInMilliseconds;
-    title: 'Created On'
-};
 
-export const locationRows = [
+export const dateColumnTimeAgoRows = [
+    { modifiedOn: new Date() },
+    { modifiedOn: new Date(Date.now() - 44 * aMinuteInMilliseconds) },
+    { modifiedOn: new Date(Date.now() - 45 * aMinuteInMilliseconds) },
+    { modifiedOn: new Date(Date.now() - 23 * anHourInMilliseconds) },
+    { modifiedOn: new Date(Date.now() - 7 * aDayInMilliseconds) },
+    { modifiedOn: new Date(Date.now() - 8 * aDayInMilliseconds) }
+];
+
+export const locationColumnRows = [
     {
-        path: {
+        path: mockPathInfos[0]
-            elements: [
+    },
-                { id: '1', name: 'path' },
+    {
-                { id: '2', name: 'to' },
+        path: mockPathInfos[1]
-                { id: '3', name: 'location' }
+    },
-            ],
+    {
-            name: '/path/to/location-link'
+        path: mockPathInfos[2]
-        }
     }
 ];
 
-export const locationColumns = [
+export const booleanColumnRows = [
-    { format: '/somewhere', type: 'location', key: 'path', title: 'Location' }
+    { bool: 'true' },
+    { bool: 'false' },
+    { bool: true },
+    { bool: false }
 ];
 
-export const dataIcon = new ObjectDataTableAdapter([
+export const iconColumnRows = [
     { icon: 'alarm' },
     { icon: 'folder_open' },
     { icon: 'accessibility' }
-]);
+];
 
-export const dataSizeInBytes = new ObjectDataTableAdapter([
+export const imageColumnRows = [
+    { image: 'material-icons://image' },
+    { image: 'material-icons://image' },
+    { image: 'material-icons://image' }
+];
+
+export const fileSizeColumnRows = [
     { size: 12313 },
     { size: 23 },
     { size: 42421412421 }
-]);
+];
+
+export const amountColumnRows = [
+    { price: 1230 },
+    { price: 422.55 },
+    { price: 50000.7855332 },
+    { price: 0.123 },
+    { price: -2022.3321 }
+];
+
+export const jsonColumnRows = [
+    { rowInfo: { id: 1, name: 'row1' } },
+    { rowInfo: { id: 2, name: 'row2' } },
+    { rowInfo: { id: 3, name: 'row3' } }
+];