diff --git a/packages/docs/PropTables/WorksheetPropTable.tsx b/packages/docs/PropTables/WorksheetPropTable.tsx
index c064d9e97..c123aae8f 100644
--- a/packages/docs/PropTables/WorksheetPropTable.tsx
+++ b/packages/docs/PropTables/WorksheetPropTable.tsx
@@ -5,11 +5,36 @@ import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components
const worksheetProps: Prop[] = [
{
name: 'columns',
- types: ['TextColumn', 'NumberColumn', 'CheckboxColumn', 'SelectableColumn', 'ModalColumn'],
+ types: [
+
+ TextColumn
+ ,
+
+ NumberColumn
+ ,
+
+ CheckboxColumn
+ ,
+
+ SelectableColumn
+ ,
+
+ ModalColumn
+ ,
+ ],
description: (
<>
- Columns will be of type TextColumn by default. See{' '}
- below for usage.
+ Columns will be of type{' '}
+
+ TextColumn
+ {' '}
+ by default.
),
required: true,
@@ -36,7 +61,9 @@ const worksheetProps: Prop[] = [
types: '(items: WorksheetError[]) => void',
description: (
<>
- Returns an array of Error when an error is present.
+ Returns an array of{' '}
+ Error when an
+ error is present.
),
},
@@ -175,10 +202,18 @@ const worksheetSelectableColumnProps: Prop[] = [
},
{
name: 'config',
- types: SelectableConfig,
+ types: (
+
+ SelectableConfig
+
+ ),
description: (
<>
- See below for usage.
+ See{' '}
+
+ SelectableConfig
+ {' '}
+ for usage.
),
},
@@ -221,10 +256,18 @@ const worksheetModalColumnProps: Prop[] = [
},
{
name: 'config',
- types: ModalConfig,
+ types: (
+
+ ModalConfig
+
+ ),
description: (
<>
- See below for usage.
+ See{' '}
+
+ ModalConfig
+ {' '}
+ for usage.
),
},
diff --git a/packages/docs/components/PropTable/PropTable.tsx b/packages/docs/components/PropTable/PropTable.tsx
index e9d749b46..a57ad83a1 100644
--- a/packages/docs/components/PropTable/PropTable.tsx
+++ b/packages/docs/components/PropTable/PropTable.tsx
@@ -125,7 +125,7 @@ const TypesData: React.FC = (props): any => {
if (Array.isArray(types)) {
return types.map((type, index) => {
return (
-
+
{type.type === Link ? {type} : {type}}
{index < types.length - 1 ? ' | ' : null}
diff --git a/packages/docs/pages/worksheet.tsx b/packages/docs/pages/worksheet.tsx
index 0bfbac804..2d7b1bc98 100644
--- a/packages/docs/pages/worksheet.tsx
+++ b/packages/docs/pages/worksheet.tsx
@@ -1,7 +1,7 @@
-import { H1, Panel, StatefulTree, Worksheet, WorksheetColumn } from '@bigcommerce/big-design';
+import { H1, Panel, StatefulTree, Text, Worksheet, WorksheetColumn } from '@bigcommerce/big-design';
import React from 'react';
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import {
WorksheetCheckboxColumnPropTable,
WorksheetErrorPropTable,
@@ -81,480 +81,611 @@ const CategoryTree = (value, onChange) => {
};
const WorksheetPage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
- { hash: 'otherField', header: 'Other field' },
- {
- hash: 'otherField2',
- header: 'Other field',
- type: 'select',
- config: {
- options: [
- { value: 'option-1', content: 'Option 1' },
- { value: 'option-2', content: 'Option 2' },
- { value: 'option-3', content: 'Option 3' },
- ],
- },
- validation: (value) => !!value,
- },
- {
- hash: 'otherField3',
- header: 'Category',
- type: 'modal',
- config: {
- header: 'Choose categories',
- render: CategoryTree,
- },
- formatting: (value: number) => CATEGORIES[value],
- },
- {
- hash: 'numberField',
- header: 'Number field',
- type: 'number',
- formatting: (value: number) => `$${value}.00`,
- validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
- },
- ];
+ return (
+ <>
+ Worksheet
- const items: Product[] = [
- {
- id: 1,
- productName: 'Product 1',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-1',
- otherField3: 2,
- numberField: 50,
- },
- {
- id: 2,
- productName: 'Product 2',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-1',
- otherField3: 6,
- numberField: 50,
- },
- {
- id: 3,
- productName: 'Product 3',
- isVisible: false,
- otherField: 'Text',
- otherField2: 'option-2',
- otherField3: 8,
- numberField: 50,
- },
- {
- id: 4,
- productName: 'Variant 1',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-2',
- otherField3: 9,
- numberField: 50,
- },
- {
- id: 5,
- productName: '',
- isVisible: true,
- otherField: 'Text',
- otherField2: '',
- otherField3: 4,
- numberField: 50,
- },
- {
- id: 6,
- productName: 'Variant 3',
- isVisible: true,
- otherField: 'Text',
- otherField2: '',
- otherField3: 3,
- numberField: 50,
- },
- {
- id: 7,
- productName: 'Variant 4',
- isVisible: false,
- otherField: 'Text',
- otherField2: 'option-2',
- otherField3: 4,
- numberField: 50,
- },
- {
- id: 8,
- productName: 'Product 4',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-2',
- otherField3: 7,
- numberField: 50,
- },
- {
- id: 9,
- productName: 'Product 5',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-2',
- otherField3: 3,
- numberField: 50,
- },
- {
- id: 10,
- productName: 'Product 6',
- isVisible: true,
- otherField: 'Text',
- otherField2: 'option-3',
- otherField3: 3,
- numberField: 50,
- },
- ];
+
+
+ Worksheet displays information about a collection of objects and allow the merchant to
+ manage and edit object data.
+
+ When to use:
+
+
+ To display and edit information across a large data set (e.x. products, customers, inventory, price lists).
+
+
+ To quickly scan and compare information in order to identify patterns, transform data, or augment with
+ additional details.
+
+
+ Unlike tables, a worksheet component is actionable and interactive and should be used in situations where
+ editing is the primary purpose.
+
+
+
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- { hash: 'otherField', header: 'Other field' },
- ];
+
+ (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
+ { hash: 'otherField', header: 'Other field' },
+ {
+ hash: 'otherField2',
+ header: 'Other field',
+ type: 'select',
+ config: {
+ options: [
+ { value: 'option-1', content: 'Option 1' },
+ { value: 'option-2', content: 'Option 2' },
+ { value: 'option-3', content: 'Option 3' },
+ ],
+ },
+ validation: (value) => !!value,
+ },
+ {
+ hash: 'otherField3',
+ header: 'Category',
+ type: 'modal',
+ config: {
+ header: 'Choose categories',
+ render: CategoryTree,
+ },
+ formatting: (value: number) => CATEGORIES[value],
+ },
+ {
+ hash: 'numberField',
+ header: 'Number field',
+ type: 'number',
+ formatting: (value: number) => `$${value}.00`,
+ validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+ },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- otherField: 'Text',
- },
- {
- id: 2,
- productName: 'Product 2',
- otherField: 'Text',
- },
- {
- id: 3,
- productName: 'Product 3',
- otherField: 'Text',
- },
- ];
+ const items: Product[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-1',
+ otherField3: 2,
+ numberField: 50,
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-1',
+ otherField3: 6,
+ numberField: 50,
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ isVisible: false,
+ otherField: 'Text',
+ otherField2: 'option-2',
+ otherField3: 8,
+ numberField: 50,
+ },
+ {
+ id: 4,
+ productName: 'Variant 1',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-2',
+ otherField3: 9,
+ numberField: 50,
+ },
+ {
+ id: 5,
+ productName: '',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: '',
+ otherField3: 4,
+ numberField: 50,
+ },
+ {
+ id: 6,
+ productName: 'Variant 3',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: '',
+ otherField3: 3,
+ numberField: 50,
+ },
+ {
+ id: 7,
+ productName: 'Variant 4',
+ isVisible: false,
+ otherField: 'Text',
+ otherField2: 'option-2',
+ otherField3: 4,
+ numberField: 50,
+ },
+ {
+ id: 8,
+ productName: 'Product 4',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-2',
+ otherField3: 7,
+ numberField: 50,
+ },
+ {
+ id: 9,
+ productName: 'Product 5',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-2',
+ otherField3: 3,
+ numberField: 50,
+ },
+ {
+ id: 10,
+ productName: 'Product 6',
+ isVisible: true,
+ otherField: 'Text',
+ otherField2: 'option-3',
+ otherField3: 3,
+ numberField: 50,
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn<{ id: number; cost: number; stock: number }>[] = [
- {
- hash: 'cost',
- header: 'Cost',
- type: 'number',
- formatting: (value: number) => `$${value}.00`,
- validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
- },
- {
- hash: 'stock',
- header: 'Stock',
- type: 'number',
- validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
- },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'text-columns',
+ title: 'Text columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ { hash: 'otherField', header: 'Other field' },
+ ];
- const items: { id: number; cost: number; stock: number }[] = [
- {
- id: 1,
- cost: 100,
- stock: 3,
- },
- {
- id: 2,
- cost: 200,
- stock: 10,
- },
- {
- id: 3,
- cost: 300,
- stock: 5,
- },
- ];
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ otherField: 'Text',
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ otherField: 'Text',
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ otherField: 'Text',
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'number-columns',
+ title: 'Number columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn<{ id: number; cost: number; stock: number }>[] = [
+ {
+ hash: 'cost',
+ header: 'Cost',
+ type: 'number',
+ formatting: (value: number) => `$${value}.00`,
+ validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+ },
+ {
+ hash: 'stock',
+ header: 'Stock',
+ type: 'number',
+ validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+ },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- isVisible: true,
- },
- {
- id: 2,
- productName: 'Product 2',
- isVisible: false,
- },
- {
- id: 3,
- productName: 'Product 3',
- isVisible: false,
- },
- ];
+ const items: { id: number; cost: number; stock: number }[] = [
+ {
+ id: 1,
+ cost: 100,
+ stock: 3,
+ },
+ {
+ id: 2,
+ cost: 200,
+ stock: 10,
+ },
+ {
+ id: 3,
+ cost: 300,
+ stock: 5,
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- {
- hash: 'otherField2',
- header: 'Other field',
- type: 'select',
- config: {
- options: [
- { value: 'option-1', content: 'Option 1' },
- { value: 'option-2', content: 'Option 2' },
- { value: 'option-3', content: 'Option 3' },
- ],
- },
- validation: (value) => !!value,
- },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'checkbox-columns',
+ title: 'Checkbox columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- otherField2: 'option-1',
- },
- {
- id: 2,
- productName: 'Product 2',
- otherField2: 'option-2',
- },
- {
- id: 3,
- productName: 'Product 3',
- otherField2: 'option-3',
- },
- ];
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ isVisible: true,
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ isVisible: false,
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ isVisible: false,
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- {
- hash: 'otherField3',
- header: 'Category',
- type: 'modal',
- config: {
- header: 'Choose categories',
- render: CategoryTree,
- },
- formatting: (value: number) => CATEGORIES[value],
- },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'selectable-columns',
+ title: 'Selectable columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ {
+ hash: 'otherField2',
+ header: 'Other field',
+ type: 'select',
+ config: {
+ options: [
+ { value: 'option-1', content: 'Option 1' },
+ { value: 'option-2', content: 'Option 2' },
+ { value: 'option-3', content: 'Option 3' },
+ ],
+ },
+ validation: (value) => !!value,
+ },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- otherField3: 1,
- },
- {
- id: 2,
- productName: 'Product 2',
- otherField3: 2,
- },
- {
- id: 3,
- productName: 'Product 3',
- otherField3: 3,
- },
- ];
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ otherField2: 'option-1',
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ otherField2: 'option-2',
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ otherField2: 'option-3',
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- { hash: 'otherField', header: 'Other field', disabled: true },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'modal-columns',
+ title: 'Modal columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ {
+ hash: 'otherField3',
+ header: 'Category',
+ type: 'modal',
+ config: {
+ header: 'Choose categories',
+ render: CategoryTree,
+ },
+ formatting: (value: number) => CATEGORIES[value],
+ },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- otherField: 'Text',
- },
- {
- id: 2,
- productName: 'Product 2',
- otherField: 'Text',
- },
- {
- id: 3,
- productName: 'Product 3',
- otherField: 'Text',
- },
- ];
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ otherField3: 1,
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ otherField3: 2,
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ otherField3: 3,
+ },
+ ];
- return (
- items} onErrors={(items) => items} />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const columns: WorksheetColumn>[] = [
- { hash: 'productName', header: 'Product name', validation: (value) => !!value },
- { hash: 'otherField', header: 'Other field' },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'disabled-columns',
+ title: 'Disabled columns',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ { hash: 'otherField', header: 'Other field', disabled: true },
+ ];
- const expandableRows = {
- 2: [3],
- 4: [5, 6],
- };
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ otherField: 'Text',
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ otherField: 'Text',
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ otherField: 'Text',
+ },
+ ];
- const items: Partial[] = [
- {
- id: 1,
- productName: 'Product 1',
- otherField: 'Text',
- },
- {
- id: 2,
- productName: 'Product 2',
- otherField: 'Text',
- },
- {
- id: 3,
- productName: 'Product 3',
- otherField: 'Text',
- },
- {
- id: 4,
- productName: 'Product 4',
- otherField: 'Text',
- },
- {
- id: 5,
- productName: 'Product 5',
- otherField: 'Text',
- },
- {
- id: 6,
- productName: 'Product 6',
- otherField: 'Text',
- },
- {
- id: 7,
- productName: 'Product 7',
- otherField: 'Text',
- },
- ];
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ {
+ id: 'expandable-rows',
+ title: 'Expandable rows',
+ render: () => (
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const columns: WorksheetColumn>[] = [
+ { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+ { hash: 'otherField', header: 'Other field' },
+ ];
- return (
- items}
- onErrors={(items) => items}
- />
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => (
- <>
-
-
-
-
-
-
-
-
-
-
- ),
- },
- ];
+ const expandableRows = {
+ 2: [3],
+ 4: [5, 6],
+ };
- return (
- <>
- Worksheet
+ const items: Partial[] = [
+ {
+ id: 1,
+ productName: 'Product 1',
+ otherField: 'Text',
+ },
+ {
+ id: 2,
+ productName: 'Product 2',
+ otherField: 'Text',
+ },
+ {
+ id: 3,
+ productName: 'Product 3',
+ otherField: 'Text',
+ },
+ {
+ id: 4,
+ productName: 'Product 4',
+ otherField: 'Text',
+ },
+ {
+ id: 5,
+ productName: 'Product 5',
+ otherField: 'Text',
+ },
+ {
+ id: 6,
+ productName: 'Product 6',
+ otherField: 'Text',
+ },
+ {
+ id: 7,
+ productName: 'Product 7',
+ otherField: 'Text',
+ },
+ ];
+
+ return (
+ items}
+ onErrors={(items) => items}
+ />
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+ ),
+ },
+ ]}
+ />
+
-
+
+ ,
+ },
+ {
+ id: 'text-column',
+ title: 'TextColumn',
+ render: () => ,
+ },
+ {
+ id: 'number-column',
+ title: 'NumberColumn',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'checkbox-column',
+ title: 'CheckboxColumn',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'selectable-column',
+ title: 'SelectableColumn',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'modal-column',
+ title: 'ModalColumn',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'selectable-config',
+ title: 'SelectableConfig',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'modal-config',
+ title: 'ModalConfig',
+ render: () => (
+
+ ),
+ },
+ {
+ id: 'error',
+ title: 'Error',
+ render: () => ,
+ },
+ ]}
+ />
+
);
};