From b91a12def06c9bdab11d4db5eb0ab100d1063bc9 Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Mon, 25 Nov 2024 18:36:30 +0400 Subject: [PATCH] fix(table): update table stories structure on storybook --- .../__stories__/_common_/editableSchema.tsx | 54 +-- core/components/organisms/table/Header.tsx | 2 +- .../table/__stories__/ErrorInTable.story.jsx | 155 +++++++ .../table/__stories__/Selection.story.jsx | 275 ----------- .../TableAsDescriptionList.story.jsx | 248 ---------- .../__stories__/TableAsOptionList.story.jsx | 133 ------ ....jsx => ToggleForHeaderCellMenu.story.jsx} | 4 +- ...story.jsx => ToggleForHeaderRow.story.jsx} | 7 +- .../customCellRenderer/BodyCell.story.jsx | 195 ++++++++ .../HeaderCell.story.jsx} | 4 +- .../table/__stories__/index.story.jsx | 346 +++++++++----- .../WithNestedCard.story.jsx} | 6 +- .../WithNestedRows.story.jsx} | 4 +- .../basicPagination.story.jsx} | 46 +- .../jumpPagination.story.jsx} | 59 +-- .../withoutPagination.story.jsx} | 77 ++-- .../selection/BulkAction.story.jsx | 345 ++++++++++++++ .../BulkActionWithSpaceConstraint.story.jsx | 343 ++++++++++++++ .../SelectionBehavior.story.jsx} | 30 +- .../{ => sizes}/CompressedTable.story.jsx | 4 +- .../{ => sizes}/StandardTable.story.jsx | 4 +- .../{ => sizes}/TightStory.story.jsx | 4 +- .../__stories__/states/DataTable.story.jsx | 427 ++++++++++++++++++ .../{ => states}/DisabledRow.story.jsx | 4 +- .../LoadingState.story.jsx} | 25 +- .../states/ResourceTable.story.jsx | 327 ++++++++++++++ .../{ => types}/DataTable.story.jsx | 4 +- .../{ => types}/ResourceTable.story.jsx | 4 +- .../table/__stories__/variants/size.story.jsx | 93 ---- .../table/__stories__/variants/type.story.jsx | 108 ----- .../variants/withCheckbox.story.jsx | 114 ----- .../variants/withPagination.story.jsx | 127 ------ .../TableWithHeader/tableWithHeader.story.jsx | 2 +- 33 files changed, 2169 insertions(+), 1411 deletions(-) create mode 100644 core/components/organisms/table/__stories__/ErrorInTable.story.jsx delete mode 100644 core/components/organisms/table/__stories__/Selection.story.jsx delete mode 100644 core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx delete mode 100644 core/components/organisms/table/__stories__/TableAsOptionList.story.jsx rename core/components/organisms/table/__stories__/{variants/showMenu.story.jsx => ToggleForHeaderCellMenu.story.jsx} (95%) rename core/components/organisms/table/__stories__/{variants/showHead.story.jsx => ToggleForHeaderRow.story.jsx} (96%) create mode 100644 core/components/organisms/table/__stories__/customCellRenderer/BodyCell.story.jsx rename core/components/organisms/table/__stories__/{variants/customHeaderCellRenderer.story.jsx => customCellRenderer/HeaderCell.story.jsx} (98%) rename core/components/organisms/table/__stories__/{NestedTableWithNestedCard.story.jsx => nesting/WithNestedCard.story.jsx} (98%) rename core/components/organisms/table/__stories__/{variants/nestedRows.story.jsx => nesting/WithNestedRows.story.jsx} (97%) rename core/components/organisms/table/__stories__/{variants/withHeader.story.jsx => pagination/basicPagination.story.jsx} (76%) rename core/components/organisms/table/__stories__/{variants/withErrorTemplate.story.jsx => pagination/jumpPagination.story.jsx} (76%) rename core/components/organisms/table/__stories__/{variants/withEditableCell.story.jsx => pagination/withoutPagination.story.jsx} (79%) create mode 100644 core/components/organisms/table/__stories__/selection/BulkAction.story.jsx create mode 100644 core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx rename core/components/organisms/table/__stories__/{SelectAllRows.story.jsx => selection/SelectionBehavior.story.jsx} (91%) rename core/components/organisms/table/__stories__/{ => sizes}/CompressedTable.story.jsx (98%) rename core/components/organisms/table/__stories__/{ => sizes}/StandardTable.story.jsx (97%) rename core/components/organisms/table/__stories__/{ => sizes}/TightStory.story.jsx (97%) create mode 100644 core/components/organisms/table/__stories__/states/DataTable.story.jsx rename core/components/organisms/table/__stories__/{ => states}/DisabledRow.story.jsx (98%) rename core/components/organisms/table/__stories__/{variants/syncLoaderSchema.story.jsx => states/LoadingState.story.jsx} (61%) create mode 100644 core/components/organisms/table/__stories__/states/ResourceTable.story.jsx rename core/components/organisms/table/__stories__/{ => types}/DataTable.story.jsx (99%) rename core/components/organisms/table/__stories__/{ => types}/ResourceTable.story.jsx (98%) delete mode 100644 core/components/organisms/table/__stories__/variants/size.story.jsx delete mode 100644 core/components/organisms/table/__stories__/variants/type.story.jsx delete mode 100644 core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx delete mode 100644 core/components/organisms/table/__stories__/variants/withPagination.story.jsx diff --git a/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx b/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx index af896add82..4740a115ad 100644 --- a/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx +++ b/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx @@ -9,7 +9,6 @@ const schema: ColumnSchema[] = [ width: '40%', resizable: true, tooltip: true, - // pinned: 'left', separator: true, translate: (a) => ({ title: `${a.firstName} ${a.lastName}`, @@ -21,9 +20,6 @@ const schema: ColumnSchema[] = [ { label: 'H-R', value: 'h-r' }, { label: 'S-Z', value: 's-z' }, ], - // comparator: (a, b) => ( - // a.lastName.localeCompare(b.lastName) && a.firstName.localeCompare(b.firstName) - // ), onFilterChange: (a, filters) => { for (const filter of filters) { switch (filter) { @@ -40,28 +36,40 @@ const schema: ColumnSchema[] = [ } return false; }, - // cellType: 'AVATAR' cellType: 'AVATAR_WITH_TEXT', }, + { + name: 'customCell', + displayName: 'Custom Cell', + width: 200, + resizable: true, + cellRenderer: (props) => { + const { loading } = props; + + if (loading) return ; + + const [weight, setWeight] = React.useState(''); + + const onChangeWeight = (value: string) => { + setWeight(value); + }; + + return ; + }, + }, { name: 'email', displayName: 'Email', width: 250, resizable: true, sorting: false, - // separator: true, - // pinned: 'left', - // align: 'center', - // comparator: (a, b) => a.email.title.localeCompare(b.email.title), cellType: 'WITH_META_LIST', - // image: iconImg, }, { name: 'gender', displayName: 'Gender', width: 180, resizable: true, - // separator: true, comparator: (a, b) => a.gender.localeCompare(b.gender), cellType: 'STATUS_HINT', translate: (a) => ({ @@ -89,30 +97,6 @@ const schema: ColumnSchema[] = [ translate: () => ({ icon: 'events', }), - // separator: true, - // status: "success" - }, - { - name: 'customCell', - displayName: 'Custom Cell', - width: 200, - resizable: true, - // pinned: 'right', - // separator: true, - cellRenderer: (props) => { - const { loading } = props; - - if (loading) return ; - - const [weight, setWeight] = React.useState(''); - - const onChangeWeight = (value: string) => { - setWeight(value); - }; - - return ; - }, - // status: "success" }, ]; diff --git a/core/components/organisms/table/Header.tsx b/core/components/organisms/table/Header.tsx index 9dc3555187..76d7b4fb91 100644 --- a/core/components/organisms/table/Header.tsx +++ b/core/components/organisms/table/Header.tsx @@ -308,7 +308,7 @@ export const Header = (props: HeaderProps) => { className="ml-4" onClick={onClearSelection} > - Clear Selection + Clear selection {selectionActionRenderer && } diff --git a/core/components/organisms/table/__stories__/ErrorInTable.story.jsx b/core/components/organisms/table/__stories__/ErrorInTable.story.jsx new file mode 100644 index 0000000000..28197947bf --- /dev/null +++ b/core/components/organisms/table/__stories__/ErrorInTable.story.jsx @@ -0,0 +1,155 @@ +import * as React from 'react'; +import { Card, Table, EmptyState, Button } from '@/index'; +import schema from '@/components/organisms/grid/__stories__/_common_/schema'; +import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; +import noContent from '@innovaccer/mds-images/ui-states/404-nothing-here-3.svg'; + +// CSF format story +export const errorInTable = () => { + const errorTemplate = () => { + return ( + + + Failed to load data + + We are unable to fetch the data. Try again. If the issue persists, contact Innovaccer support. + + + + + + ); + }; + + return ( +
+ + + + + ); +}; + +const ImagePath = JSON.stringify(noContent); + +const customCode = `() => { + // import noContent from '@innovaccer/mds-images/ui-states/404-nothing-here-3.svg'; + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: '40%', + resizable: true, + tooltip: true, + separator: true, + translate: (a) => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName, + }), + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + cellType: 'AVATAR_WITH_TEXT', + }, + { + name: 'email', + displayName: 'Email', + width: 250, + resizable: true, + sorting: false, + cellType: 'WITH_META_LIST', + }, + { + name: 'gender', + displayName: 'Gender', + width: 180, + resizable: true, + comparator: (a, b) => a.gender.localeCompare(b.gender), + cellType: 'STATUS_HINT', + translate: (a) => ({ + title: a.gender, + statusAppearance: a.gender === 'Female' ? 'alert' : 'success', + }), + filters: [ + { label: 'Male', value: 'male' }, + { label: 'Female', value: 'female' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.gender.toLowerCase() === filter) return true; + } + return false; + }, + }, + { + name: 'icon', + displayName: 'Icon', + width: 100, + resizable: true, + align: 'center', + cellType: 'ICON', + translate: () => ({ + icon: 'events', + }), + } +]; + + const errorTemplate = () => { + return ( + + + Failed to load data + + We are unable to fetch the data. Try again. If the issue persists, contact Innovaccer support. + + + + + + ); + }; + + return ( +
+ +
+ + + ); +}`; + +export default { + title: 'Components/Table/Error In Table', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/Selection.story.jsx b/core/components/organisms/table/__stories__/Selection.story.jsx deleted file mode 100644 index 8a3683a104..0000000000 --- a/core/components/organisms/table/__stories__/Selection.story.jsx +++ /dev/null @@ -1,275 +0,0 @@ -import * as React from 'react'; -import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; -import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; -import { action } from '@/utils/action'; - -const data = [ - { - firstName: 'Brooke', - lastName: 'Heeran', - email: 'bheeran0@altervista.org', - role: 'Administrator', - manager: 'Seb Grant', - last_login: 'May 5', - status: 'Active', - }, - { - firstName: 'Frazer', - lastName: 'Cathro', - email: 'fcathro1@ucla.edu', - role: 'Healthcoaches', - manager: 'Mike Page', - last_login: 'May 4', - status: 'Active', - }, - { - firstName: 'Lemmie', - lastName: 'Ciric', - email: { - title: 'lciric2@dmoz.org', - metaList: ['First', 'Second'], - }, - role: 'Administrator', - manager: 'Seb Grant', - last_login: 'April 5', - status: 'Inactive', - }, - { - firstName: 'Randy', - lastName: 'Boatwright', - email: 'rboatwright3@arstechnica.com', - role: 'Healthcoaches', - manager: 'William Estrada', - last_login: 'March 5', - status: 'Active', - }, - { - firstName: 'Rolando', - lastName: 'Cyples', - email: 'rcyples4@biglobe.ne.jp', - role: 'Administrator', - manager: 'Seb Grant', - last_login: 'May 10', - status: 'Inactive', - }, - { - firstName: 'Lem', - lastName: 'Males', - email: 'lmales5@admin.ch', - role: 'PCP Staff', - manager: 'Seb Grant', - last_login: 'June 5', - status: 'Inactive', - }, - { - firstName: 'Sayres', - lastName: 'Adelberg', - email: 'sadelberg6@uol.com.br', - role: 'Leadership', - manager: 'William Estrada', - last_login: 'May 5', - status: 'Active', - }, - { - firstName: 'Murray', - lastName: 'Bravington', - email: 'mbravington7@drupal.org', - role: 'Healthcoaches', - manager: 'William Estrada', - last_login: 'May 9', - status: 'Active', - }, - { - firstName: 'Jena', - lastName: 'Swatheridge', - email: 'jswatheridge8@npr.org', - role: 'Leadership', - manager: 'Mike Page', - last_login: 'Jan 5', - status: 'Active', - }, - { - firstName: 'Annabel', - lastName: 'Nelsey', - email: 'anelsey9@google.com', - role: 'Healthcoaches', - manager: 'Mike Page', - last_login: 'April 27', - status: 'Inactive', - }, -]; - -export const selection = () => { - const schema = [ - { - name: 'name', - displayName: 'Name', - width: '30%', - separator: true, - translate: (a) => ({ - title: `${a.lastName}, ${a.firstName}`, - firstName: a.firstName, - lastName: a.lastName, - }), - cellType: 'AVATAR_WITH_TEXT', - sorting: false, - }, - { - name: 'role', - displayName: 'Role', - width: 250, - sorting: false, - }, - { - name: 'manager', - displayName: 'Manager', - width: 180, - sorting: false, - }, - { - name: 'last_login', - displayName: 'Last Login', - width: 100, - sorting: false, - }, - { - name: 'status', - displayName: 'Status', - width: 200, - cellType: 'STATUS_HINT', - sorting: false, - translate: (a) => ({ - title: a.status, - statusAppearance: a.status === 'Inactive' ? 'default' : 'success', - }), - }, - ]; - return ( - -
- action( - `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( - selectedList - )} selectAll: ${selectAll}` - )() - } - headerOptions={{ - withSearch: true, - }} - onSearch={(currData, searchTerm) => { - return currData.filter( - (d) => - d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || - d.lastName.toLowerCase().match(searchTerm.toLowerCase()) - ); - }} - withPagination={true} - pageSize={5} - onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} - /> - - ); -}; - -const customCode = ` -() => { - const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; - - const schema = [ - { - name: 'name', - displayName: 'Name', - width: '30%', - separator: true, - translate: a => ({ - title: \`\${a.lastName}, \${a.firstName}\`, - firstName: a.firstName, - lastName: a.lastName - }), - cellType: 'AVATAR_WITH_TEXT', - sorting: false - }, - { - name: 'role', - displayName: 'Role', - width: 250, - sorting: false - }, - { - name: 'manager', - displayName: 'Manager', - width: 180, - sorting: false - }, - { - name: 'last_login', - displayName: 'Last Login', - width: 100, - sorting: false - }, - { - name: 'status', - displayName: 'Status', - width: 200, - cellType: 'STATUS_HINT', - sorting: false, - translate: a => ({ - title: a.status, - statusAppearance: (a.status === 'Inactive') ? 'default' : 'success' - }), - }, - ]; - return ( - -
- console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`) - } - headerOptions={{ - withSearch: true - }} - onSearch={(currData, searchTerm) => { - return currData.filter(d => - d.firstName.toLowerCase().match(searchTerm.toLowerCase()) - || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) - ); - }} - withPagination={true} - pageSize={5} - onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} - /> - - ); -}; -`; - -export default { - title: 'Components/Table/Selection', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx b/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx deleted file mode 100644 index a86c25c126..0000000000 --- a/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx +++ /dev/null @@ -1,248 +0,0 @@ -import * as React from 'react'; -import { Card, List, Text, Button, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; -import { action } from '@/utils/action'; - -export const tableAsDescriptionList = () => { - const data = [ - { - firstName: 'John', - lastName: 'Doe', - email: 'jonathandoe@gamil.com', - owner: true, - }, - { - firstName: 'Katty', - lastName: 'Perry', - email: 'kattyperry21@gamil.com', - edit: true, - }, - { - firstName: 'Daniel', - lastName: 'Low', - email: 'daniellow02@yahoo.com', - view: true, - }, - { - firstName: 'Randy', - lastName: 'Boatwright', - email: 'rboatwright3@arstechnica.com', - edit: true, - }, - { - firstName: 'Rolando', - lastName: 'Cyples', - email: 'rcyples4@biglobe.ne.jp', - owner: true, - }, - ]; - - const schema = [ - { - name: 'info', - displayName: 'Info', - width: '75%', - cellType: 'AVATAR_WITH_META_LIST', - translate: (a) => ({ - firstName: a.firstName, - lastName: a.lastName, - title: `${a.firstName} ${a.lastName}`, - metaList: [a.email], - }), - }, - { - name: 'rights', - displayName: 'Rights', - width: '25%', - cellRenderer: (props) => { - const renderRights = () => { - if (props.data.owner) { - return ( - - owner - - ); - } - - if (props.data.edit || props.data.view) { - const rights = props.data.edit ? 'edit' : 'view'; - return ( - - ); - } - - return null; - }; - - return
{renderRights()}
; - }, - }, - ]; - - return ( - - - Sharing Test Manual - - { - return currData.filter( - (d) => - d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || - d.lastName.toLowerCase().match(searchTerm.toLowerCase()) - ); - }} - onRowClick={(rowData, rowIndex) => - action(`on-row-click:- rowIndex: ${rowIndex} data: ${JSON.stringify(rowData)}`)() - } - /> - - ); -}; - -const customCode = `() => { - const data = [ - { - firstName: 'John', - lastName: 'Doe', - email: 'jonathandoe@gamil.com', - owner: true - }, - { - firstName: 'Katty', - lastName: 'Perry', - email: 'kattyperry21@gamil.com', - edit: true - }, - { - firstName: 'Daniel', - lastName: 'Low', - email: 'daniellow02@yahoo.com', - view: true - }, - { - firstName: 'Randy', - lastName: 'Boatwright', - email: 'rboatwright3@arstechnica.com', - edit: true, - }, - { - firstName: 'Rolando', - lastName: 'Cyples', - email: 'rcyples4@biglobe.ne.jp', - owner: true, - }, - ]; - - const schema = [ - { - name: 'info', - displayName: 'Info', - width: '75%', - cellType: 'AVATAR_WITH_META_LIST', - translate: a => ({ - firstName: a.firstName, - lastName: a.lastName, - title: \`\${a.firstName} \${a.lastName}\`, - metaList: [a.email] - }), - }, - { - name: 'rights', - displayName: 'Rights', - width: '25%', - cellRenderer: (props) => { - const renderRights = () => { - if (props.data.owner) { - return owner; - } - - if (props.data.edit || props.data.view) { - const rights = props.data.edit ? 'edit' : 'view'; - return ( - - ); - } - - return null; - }; - - return ( -
- {renderRights()} -
- ); - } - } - ]; - - return ( - - Sharing Test Manual - { - return currData.filter(d => - d.firstName.toLowerCase().match(searchTerm.toLowerCase()) - || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) - ); - }} - onRowClick={(rowData, rowIndex) => - console.log(\`o\n-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`) - } - /> - - ); -}`; - -export default { - title: 'Components/Table/Table As Description List', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - title: 'Table as Description List', - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/TableAsOptionList.story.jsx b/core/components/organisms/table/__stories__/TableAsOptionList.story.jsx deleted file mode 100644 index 5f2ae36135..0000000000 --- a/core/components/organisms/table/__stories__/TableAsOptionList.story.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import * as React from 'react'; -import { Card, List, Text, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; -import { action } from '@/utils/action'; - -export const tableAsOptionList = () => { - const data = [ - { - assessment: 'Alcohol Usage Disorders Identification Test - C (Audit C)', - }, - { - assessment: 'Functional Assessment - Initial', - }, - { - assessment: 'Functional Assessment - Discharge', - }, - { - assessment: 'Hypertension - Diabetes Symptoms Identification Test', - }, - { - assessment: 'Patient Health Questionaire', - }, - ]; - - const schema = [ - { - name: 'assessment', - displayName: 'Assessment', - cellType: 'DEFAULT', - width: '100%', - }, - ]; - - return ( - - - Select Assessment - - { - return currData.filter((d) => d.assessment.toLowerCase().match(searchTerm.toLowerCase())); - }} - onRowClick={(rowData, rowIndex) => - action(`on-row-click:- rowIndex: ${rowIndex} data: ${JSON.stringify(rowData)}`)() - } - /> - - ); -}; - -const customCode = `() => { - const data = [ - { - assessment: 'Alcohol Usage Disorders Identification Test - C (Audit C)', - }, - { - assessment: 'Functional Assessment - Initial', - }, - { - assessment: 'Functional Assessment - Discharge', - }, - { - assessment: 'Hypertension - Diabetes Symptoms Identification Test', - }, - { - assessment: 'Patient Health Questionaire', - }, - ]; - - const schema = [ - { - name: 'assessment', - displayName: 'Assessment', - cellType: "DEFAULT", - width: '100%' - }, - ]; - - return ( - - Select Assessment - { - return currData.filter(d => - d.assessment.toLowerCase().match(searchTerm.toLowerCase()) - ); - }} - onRowClick={(rowData, rowIndex) => - console.log(\`on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`) - } - /> - - ); -}`; - -export default { - title: 'Components/Table/Table As Option List', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - title: 'Table as Option List', - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/variants/showMenu.story.jsx b/core/components/organisms/table/__stories__/ToggleForHeaderCellMenu.story.jsx similarity index 95% rename from core/components/organisms/table/__stories__/variants/showMenu.story.jsx rename to core/components/organisms/table/__stories__/ToggleForHeaderCellMenu.story.jsx index d3c050b196..1ec8d9bbdc 100644 --- a/core/components/organisms/table/__stories__/variants/showMenu.story.jsx +++ b/core/components/organisms/table/__stories__/ToggleForHeaderCellMenu.story.jsx @@ -5,7 +5,7 @@ import { Card, Heading, Table, Row, Column } from '@/index'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; // CSF format story -export const showMenu = () => { +export const toggleForHeaderCellMenu = () => { const values = [true, false]; // to freeze the object for typescript @@ -76,7 +76,7 @@ const customCode = ` `; export default { - title: 'Components/Table/Variants/Show Menu', + title: 'Components/Table/Toggle For Header Cell Menu', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/showHead.story.jsx b/core/components/organisms/table/__stories__/ToggleForHeaderRow.story.jsx similarity index 96% rename from core/components/organisms/table/__stories__/variants/showHead.story.jsx rename to core/components/organisms/table/__stories__/ToggleForHeaderRow.story.jsx index 0d247f0855..982fffb53c 100644 --- a/core/components/organisms/table/__stories__/variants/showHead.story.jsx +++ b/core/components/organisms/table/__stories__/ToggleForHeaderRow.story.jsx @@ -5,12 +5,9 @@ import schema from '@/components/organisms/grid/__stories__/_common_/schema'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; // CSF format story -export const showHead = () => { +export const toggleForHeaderRow = () => { const values = [true, false]; - // to freeze the object for typescript - // console.log(schema, 'hi'); - return (
@@ -133,7 +130,7 @@ const customCode = `() => { `; export default { - title: 'Components/Table/Variants/Show Head', + title: 'Components/Table/Toggle For Header Row', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/customCellRenderer/BodyCell.story.jsx b/core/components/organisms/table/__stories__/customCellRenderer/BodyCell.story.jsx new file mode 100644 index 0000000000..8b99a3fe77 --- /dev/null +++ b/core/components/organisms/table/__stories__/customCellRenderer/BodyCell.story.jsx @@ -0,0 +1,195 @@ +import * as React from 'react'; +import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; +import data from '@/components/organisms/grid/__stories__/_common_/data'; +import editableSchema from '@/components/organisms/grid/__stories__/_common_/editableSchema'; +import { Card, Table } from '@/index'; +import { AsyncTable, SyncTable } from '../_common_/types'; +import { action } from '@/utils/action'; + +export const bodyCell = () => { + return ( +
+ +
+ action( + `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( + selectedList + )} selectAll: ${selectAll}` + )() + } + headerOptions={{ + withSearch: true, + }} + onSearch={(currData, searchTerm) => { + return currData.filter( + (d) => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || + d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withPagination={true} + pageSize={4} + onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} + /> + + + ); +}; + +const customCode = ` +() => { + const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: '40%', + resizable: true, + tooltip: true, + separator: true, + translate: (a) => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName, + }), + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + cellType: 'AVATAR_WITH_TEXT', + }, + { + name: 'customCell', + displayName: 'Custom Cell', + width: 200, + resizable: true, + cellRenderer: (props) => { + const { loading } = props; + + if (loading) return ; + + const [weight, setWeight] = React.useState(''); + + const onChangeWeight = (value) => { + setWeight(value); + }; + + return ; + }, + }, + { + name: 'email', + displayName: 'Email', + width: 250, + resizable: true, + sorting: false, + cellType: 'WITH_META_LIST', + }, + { + name: 'gender', + displayName: 'Gender', + width: 180, + resizable: true, + comparator: (a, b) => a.gender.localeCompare(b.gender), + cellType: 'STATUS_HINT', + translate: (a) => ({ + title: a.gender, + statusAppearance: a.gender === 'Female' ? 'alert' : 'success', + }), + filters: [ + { label: 'Male', value: 'male' }, + { label: 'Female', value: 'female' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.gender.toLowerCase() === filter) return true; + } + return false; + }, + }, + { + name: 'icon', + displayName: 'Icon', + width: 100, + resizable: true, + align: 'center', + cellType: 'ICON', + translate: () => ({ + icon: 'events', + }), + }, +]; + + + const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)}; + + return ( +
+ +
{ + return currData.filter(d => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) + || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withCheckbox={true} + onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)} + withPagination={true} + pageSize={4} + onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} + /> + + + ); +}; +`; + +export default { + title: 'Components/Table/Custom Cell Renderer/Body Cell', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/variants/customHeaderCellRenderer.story.jsx b/core/components/organisms/table/__stories__/customCellRenderer/HeaderCell.story.jsx similarity index 98% rename from core/components/organisms/table/__stories__/variants/customHeaderCellRenderer.story.jsx rename to core/components/organisms/table/__stories__/customCellRenderer/HeaderCell.story.jsx index aff48f6f22..9a865ccea6 100644 --- a/core/components/organisms/table/__stories__/variants/customHeaderCellRenderer.story.jsx +++ b/core/components/organisms/table/__stories__/customCellRenderer/HeaderCell.story.jsx @@ -3,7 +3,7 @@ import { Card, Table, Badge, Icon } from '@/index'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; -export const customHeaderCellRenderer = () => { +export const headerCell = () => { const data = [ { claim_id: 'Q10000101', @@ -405,7 +405,7 @@ const customCode = `() => { export default { component: Table, - title: 'Components/Table/Variants/Custom Header Cell Renderer', + title: 'Components/Table/Custom Cell Renderer/Header Cell', parameters: { docs: { docPage: { diff --git a/core/components/organisms/table/__stories__/index.story.jsx b/core/components/organisms/table/__stories__/index.story.jsx index 501312837f..7fd5ff5e38 100644 --- a/core/components/organisms/table/__stories__/index.story.jsx +++ b/core/components/organisms/table/__stories__/index.story.jsx @@ -1,130 +1,258 @@ import * as React from 'react'; -import schema from '@/components/organisms/grid/__stories__/_common_/schema'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; -import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; -import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData'; -import { action } from '@/utils/action'; -import { Card, Table } from '@/index'; +import { Table, Card } from '@/index'; import { AsyncTable, SyncTable } from './_common_/types'; -import { nestedRowRenderer } from '../../grid/__stories__/_common_/nestedRowRenderer'; -import { errorTemplate } from '../../grid/__stories__/_common_/errorTemplate'; export const all = () => { - const async = false; - - let loading; - let error; - let applyData; - let applySchema; - const applyLoaderSchema = true; - - if (!async) { - loading = false; - - error = false; - - applySchema = true; - - applyData = true; - } - - const type = 'resource'; - - const size = 'comfortable'; - - const draggable = true; - - const nestedRows = false; - - const withHeader = true; - - const withCheckbox = false; - - const showMenu = true; - - const withPagination = false; - - const page = 1; - - const paginationType = 'jump'; - - const pageSize = 12; - - const multipleSorting = false; + const data = [ + { + firstName: 'Brooke', + lastName: 'Heeran', + email: 'bheeran0@altervista.org', + gender: 'Female', + status: 'Failed', + }, + { + firstName: 'Frazer', + lastName: 'Cathro', + email: 'fcathro1@ucla.edu', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Lemmie', + lastName: 'Ciric', + email: { + title: 'lciric2@dmoz.org', + metaList: ['First', 'Second'], + }, + gender: 'Male', + status: 'Completed', + }, + { + firstName: 'Randy', + lastName: 'Boatwright', + email: 'rboatwright3@arstechnica.com', + status: 'Completed', + gender: 'Male', + }, + { + firstName: 'Rolando', + lastName: 'Cyples', + email: 'rcyples4@biglobe.ne.jp', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Lem', + lastName: 'Males', + email: 'lmales5@admin.ch', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Sayres', + lastName: 'Adelberg', + email: 'sadelberg6@uol.com.br', + gender: 'Male', + status: 'Completed', + }, + { + firstName: 'Murray', + lastName: 'Bravington', + email: 'mbravington7@drupal.org', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Jena', + lastName: 'Swatheridge', + email: 'jswatheridge8@npr.org', + gender: 'Female', + status: 'Failed', + }, + { + firstName: 'Annabel', + lastName: 'Nelsey', + email: 'anelsey9@google.com', + gender: 'Female', + status: 'Completed', + }, + ]; - const headCellTooltip = false; + const schema = [ + { + name: 'firstName', + displayName: 'Name', + cellType: 'AVATAR_WITH_TEXT', + width: '25%', + translate: (a) => ({ + title: `${a.firstName} ${a.lastName}`, + firstName: a.firstName, + lastName: a.lastName, + }), + }, + { + name: 'email', + displayName: 'Email', + width: '25%', + }, + { + name: 'gender', + displayName: 'Gender', + width: '25%', + }, + { + name: 'status', + displayName: 'Status', + width: '25%', + }, + ]; - const separator = false; + return ( +
+ +
+ + + ); +}; - const filterPosition = 'HEADER'; +const customCode = `() => { + const data = [ + { + firstName: 'Brooke', + lastName: 'Heeran', + email: 'bheeran0@altervista.org', + gender: 'Female', + status: 'Failed', + }, + { + firstName: 'Frazer', + lastName: 'Cathro', + email: 'fcathro1@ucla.edu', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Lemmie', + lastName: 'Ciric', + email: { + title: 'lciric2@dmoz.org', + metaList: ['First', 'Second'], + }, + gender: 'Male', + status: 'Completed', + }, + { + firstName: 'Randy', + lastName: 'Boatwright', + email: 'rboatwright3@arstechnica.com', + status: 'Completed', + gender: 'Male', + }, + { + firstName: 'Rolando', + lastName: 'Cyples', + email: 'rcyples4@biglobe.ne.jp', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Lem', + lastName: 'Males', + email: 'lmales5@admin.ch', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Sayres', + lastName: 'Adelberg', + email: 'sadelberg6@uol.com.br', + gender: 'Male', + status: 'Completed', + }, + { + firstName: 'Murray', + lastName: 'Bravington', + email: 'mbravington7@drupal.org', + gender: 'Male', + status: 'Failed', + }, + { + firstName: 'Jena', + lastName: 'Swatheridge', + email: 'jswatheridge8@npr.org', + gender: 'Female', + status: 'Failed', + }, + { + firstName: 'Annabel', + lastName: 'Nelsey', + email: 'anelsey9@google.com', + gender: 'Female', + status: 'Completed', + }, + ]; - let dataAttr = {}; - if (async) { - dataAttr = { - fetchData, - }; - } else { - dataAttr = { - loading, - error, - schema: applySchema ? schema : [], - data: applyData ? data : [], - }; - } + const schema = [ + { + name: 'firstName', + displayName: 'Name', + cellType: 'AVATAR_WITH_TEXT', + width: '25%', + translate: (a) => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName, + }), + }, + { + name: 'email', + displayName: 'Email', + width: '25%', + }, + { + name: 'gender', + displayName: 'Gender', + width: '25%', + }, + { + name: 'status', + displayName: 'Status', + width: '25%', + }, + ]; return ( -
+
- action(`on-row-click:- rowIndex: ${rowIndex} data: ${JSON.stringify(rowData)}`)() - } - onSelect={(rowIndex, selected, selectedList, selectAll) => - action( - `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( - selectedList - )} selectAll: ${selectAll}` - )() - } - onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} - onSearch={(currData, searchTerm) => { - action(`on-search:- currData: ${JSON.stringify(currData)}, searchTerm: ${searchTerm}`)(); - return currData; - }} - multipleSorting={multipleSorting} - sortingList={[{ name: 'name', type: 'desc' }]} - filterList={{ - name: ['h-r', 's-z'], - }} - filterPosition={filterPosition} /> ); -}; +}`; export default { title: 'Components/Table/All', @@ -132,11 +260,11 @@ export default { parameters: { docs: { docPage: { + customCode, props: { components: { AsyncTable, SyncTable }, exclude: ['showHead'], }, - noStory: true, }, }, }, diff --git a/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.jsx b/core/components/organisms/table/__stories__/nesting/WithNestedCard.story.jsx similarity index 98% rename from core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.jsx rename to core/components/organisms/table/__stories__/nesting/WithNestedCard.story.jsx index b9be939ed8..480d03e87d 100644 --- a/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.jsx +++ b/core/components/organisms/table/__stories__/nesting/WithNestedCard.story.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { Card, Table, CardSubdued, Text, Column, Row, Button } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import { action } from '@/utils/action'; -export const nestedTableWithNestedCards = () => { +export const withNestedCards = () => { const data = [ { firstName: 'Brooke', @@ -344,7 +344,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Nested Table With Nested Cards', + title: 'Components/Table/Nesting/With Nested Cards', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/nestedRows.story.jsx b/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx similarity index 97% rename from core/components/organisms/table/__stories__/variants/nestedRows.story.jsx rename to core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx index c31eb4d425..d991912b73 100644 --- a/core/components/organisms/table/__stories__/variants/nestedRows.story.jsx +++ b/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx @@ -7,7 +7,7 @@ import data from '@/components/organisms/grid/__stories__/_common_/data'; import { action } from '@/utils/action'; // CSF format story -export const nestedRows = () => { +export const withNestedRows = () => { schema[0].width = 400; return ( @@ -170,7 +170,7 @@ const customCode = ` `; export default { - title: 'Components/Table/Variants/Nested Rows', + title: 'Components/Table/Nesting/With Nested Rows', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/withHeader.story.jsx b/core/components/organisms/table/__stories__/pagination/basicPagination.story.jsx similarity index 76% rename from core/components/organisms/table/__stories__/variants/withHeader.story.jsx rename to core/components/organisms/table/__stories__/pagination/basicPagination.story.jsx index 7eae01759f..5b21f6c63f 100644 --- a/core/components/organisms/table/__stories__/variants/withHeader.story.jsx +++ b/core/components/organisms/table/__stories__/pagination/basicPagination.story.jsx @@ -2,32 +2,19 @@ import * as React from 'react'; import { Card, Table } from '@/index'; import data from '@/components/organisms/grid/__stories__/_common_/data'; import schema from '@/components/organisms/grid/__stories__/_common_/schema'; -import { action } from '@/utils/action'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; -export const withHeader = () => { +// CSF format story +export const basicPagination = () => { return ( -
+
- action( - `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( - selectedList - )} selectAll: ${selectAll}` - )() - } - onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} - headerOptions={{ - withSearch: true, - }} + paginationType={'basic'} /> @@ -42,7 +29,6 @@ const customCode = ` { name: 'name', displayName: 'Name', - width: 300, resizable: true, separator: true, tooltip: true, @@ -80,7 +66,6 @@ const customCode = ` width: 350, resizable: true, sorting: false, - cellType: 'WITH_META_LIST' }, { name: 'gender', @@ -111,6 +96,7 @@ const customCode = ` resizable: true, align: 'center', cellType: 'ICON', + sorting: false, translate: _ => ({ icon: 'events' }) @@ -121,6 +107,7 @@ const customCode = ` width: 200, resizable: true, cellType: 'WITH_META_LIST', + sorting: false, cellRenderer: props => { return ( <> @@ -139,24 +126,14 @@ const customCode = ` ]; return ( -
+
@@ -165,13 +142,12 @@ const customCode = ` `; export default { - title: 'Components/Table/Variants/With Header', + title: 'Components/Table/Pagination/Basic Pagination', component: Table, parameters: { docs: { docPage: { customCode, - title: 'Standard Table', props: { components: { AsyncTable, SyncTable }, exclude: ['showHead'], diff --git a/core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx b/core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx similarity index 76% rename from core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx rename to core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx index 8069fee79d..4bca7e9c25 100644 --- a/core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx +++ b/core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx @@ -1,15 +1,21 @@ import * as React from 'react'; import { Card, Table } from '@/index'; -import { errorTemplate } from '@/components/organisms/grid/__stories__/_common_/errorTemplate'; +import data from '@/components/organisms/grid/__stories__/_common_/data'; import schema from '@/components/organisms/grid/__stories__/_common_/schema'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; // CSF format story -export const withErrorTemplate = () => { +export const jumpPagination = () => { return ( -
+
-
+
); @@ -17,11 +23,12 @@ export const withErrorTemplate = () => { const customCode = ` () => { + const data = ${JSON.stringify(data, null, 4)}; + const schema = [ { name: 'name', displayName: 'Name', - width: 300, resizable: true, separator: true, tooltip: true, @@ -59,7 +66,6 @@ const customCode = ` width: 350, resizable: true, sorting: false, - cellType: 'WITH_META_LIST' }, { name: 'gender', @@ -90,6 +96,7 @@ const customCode = ` resizable: true, align: 'center', cellType: 'ICON', + sorting: false, translate: _ => ({ icon: 'events' }) @@ -99,36 +106,34 @@ const customCode = ` displayName: 'Custom Cell', width: 200, resizable: true, - separator: true, - cellRenderer: (props) => { - const { - loading - } = props; - - if (loading) return <>; - + cellType: 'WITH_META_LIST', + sorting: false, + cellRenderer: props => { return ( - + <> + + + ); } }, ]; - const errorTemplate = () => { - return ( - We failed as a team - ); - }; - return ( -
+
@@ -137,7 +142,7 @@ const customCode = ` `; export default { - title: 'Components/Table/Variants/With Error Template', + title: 'Components/Table/Pagination/Jump Pagination', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx b/core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx similarity index 79% rename from core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx rename to core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx index 1e4c75afdf..95c45190d3 100644 --- a/core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx +++ b/core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx @@ -1,21 +1,25 @@ import * as React from 'react'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; import data from '@/components/organisms/grid/__stories__/_common_/data'; -import editableSchema from '@/components/organisms/grid/__stories__/_common_/editableSchema'; +import schema from '@/components/organisms/grid/__stories__/_common_/schema'; import { Card, Table } from '@/index'; import { AsyncTable, SyncTable } from '../_common_/types'; import { action } from '@/utils/action'; -export const withEditableCell = () => { +export const withoutPagination = () => { return (
{ + return data[index % 10]; + })} + schema={schema} withHeader={true} withCheckbox={true} + withPagination={false} + uniqueColumnName="email" onSelect={(rowIndex, selected, selectedList, selectAll) => action( `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( @@ -25,6 +29,7 @@ export const withEditableCell = () => { } headerOptions={{ withSearch: true, + allowSelectAll: true, }} onSearch={(currData, searchTerm) => { return currData.filter( @@ -33,8 +38,6 @@ export const withEditableCell = () => { d.lastName.toLowerCase().match(searchTerm.toLowerCase()) ); }} - withPagination={true} - pageSize={5} onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} /> @@ -42,9 +45,14 @@ export const withEditableCell = () => { ); }; -const customCode = ` -() => { - const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; +const customCode = `() => { + const data = ${JSON.stringify( + [...Array(100)].map((_, index) => { + return data[index % 10]; + }), + null, + 4 + )}; const schema = [ { @@ -129,49 +137,44 @@ const customCode = ` displayName: 'Custom Cell', width: 200, resizable: true, - separator: true, + cellType: 'WITH_META_LIST', sorting: false, - cellRenderer: (props) => { - const { loading } = props; - - if (loading) return ( - - ); - - const [weight, setWeight] = React.useState(''); - - const onChangeWeight = (value) => { - setWeight(value); - }; - + cellRenderer: props => { return ( - + <> + + + ); } }, ]; - const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)}; + const [error, setError] = React.useState(false); return ( -
+
{ + console.log('onsearch called', searchTerm); + setError(!error); return currData.filter(d => d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) @@ -179,8 +182,6 @@ const customCode = ` }} withCheckbox={true} onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)} - withPagination={true} - pageSize={5} onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} /> @@ -190,7 +191,7 @@ const customCode = ` `; export default { - title: 'Components/Table/Variants/With Editable Cell', + title: 'Components/Table/Pagination/Without Pagination', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx b/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx new file mode 100644 index 0000000000..d5d1e8eb48 --- /dev/null +++ b/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx @@ -0,0 +1,345 @@ +import * as React from 'react'; +import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; +import data from '@/components/organisms/grid/__stories__/_common_/data'; +import { Card, Table, Button } from '@/index'; +import { AsyncTable, SyncTable } from '../_common_/types'; +import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData'; +import { action } from '@/utils/action'; + +export const bulkActions = () => { + const selectionActionRenderer = (selectedData, selectAll) => { + action('selectedData', selectedData, 'selectAll', selectAll)(); + return ( +
+ + +
+ ); + }; + + const onDataExport = (data) => { + action('Exporting data', data)(); + }; + + const globalActionTrigger = (data) => { + return ; + }; + + return ( +
+ +
+ action( + `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( + selectedList + )} selectAll: ${selectAll}` + )() + } + headerOptions={{ + withSearch: true, + allowSelectAll: true, + selectionActionRenderer, + customSelectionLabel: 'user', + globalActionRenderer: globalActionTrigger, + }} + withPagination={true} + pageSize={5} + onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} + /> + + + ); +}; + +const customCode = ` +() => { + const translateData = (schema, data) => { + let newData = data; + + if (schema.translate) { + const translatedData = schema.translate(data); + newData = { + ...newData, + [schema.name]: typeof translatedData === 'object' ? { + ...newData[schema.name], + ...translatedData + } : translatedData + }; + } + if (typeof newData[schema.name] !== 'object') newData[schema.name] = { title: newData[schema.name] }; + + return newData; + } + + const filterData = (schema, data, filterList) => { + let filteredData = data; + if (filterList) { + Object.keys(filterList).forEach(schemaName => { + const filters = filterList[schemaName]; + const sIndex = schema.findIndex(s => s.name === schemaName); + const { onFilterChange } = schema[sIndex]; + if (filters.length && onFilterChange) { + filteredData = filteredData.filter(d => onFilterChange(d, filters)); + } + }); + } + + return filteredData; + }; + + const sortData = (schema, data, sortingList) => { + const sortedData = [...data]; + sortingList.forEach(l => { + const sIndex = schema.findIndex(s => s.name === l.name); + if (sIndex !== -1) { + const defaultComparator = (a, b) => { + const aData = translateData(schema[sIndex], a); + const bData = translateData(schema[sIndex], b); + return aData[l.name].title.localeCompare(bData[l.name].title); + }; + + const { + comparator = defaultComparator + } = schema[sIndex]; + + sortedData.sort(comparator); + if (l.type === 'desc') sortedData.reverse(); + } + }); + + return sortedData; + }; + + const paginateData = (data, page, pageSize) => { + const start = (page - 1) * pageSize; + const end = start + pageSize; + const paginatedData = data.slice(start, end); + return paginatedData; + }; + + const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; + const [formattedData, setFormattedData] = React.useState(data); + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: 300, + resizable: true, + separator: true, + tooltip: true, + translate: a => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName + }), + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + cellType: 'AVATAR_WITH_TEXT', + }, + { + name: 'email', + displayName: 'Email', + width: 350, + resizable: true, + sorting: false, + cellType: 'WITH_META_LIST' + }, + { + name: 'gender', + displayName: 'Gender', + width: 200, + resizable: true, + comparator: (a, b) => a.gender.localeCompare(b.gender), + cellType: 'STATUS_HINT', + translate: a => ({ + title: a.gender, + statusAppearance: (a.gender === 'Female') ? 'alert' : 'success' + }), + filters: [ + { label: 'Male', value: 'male' }, + { label: 'Female', value: 'female' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.gender.toLowerCase() === filter) return true; + } + return false; + }, + }, + { + name: 'icon', + displayName: 'Icon', + width: 100, + resizable: true, + align: 'center', + cellType: 'ICON', + sorting: false, + translate: _ => ({ + icon: 'events' + }) + }, + { + name: 'customCell', + displayName: 'Custom Cell', + width: 200, + resizable: true, + cellType: 'WITH_META_LIST', + sorting: false, + cellRenderer: props => { + return ( + <> + + + + ); + } + }, + ]; + + const fetchData = (options) => { + const { + page, + pageSize, + sortingList, + filterList, + searchTerm + } = options; + + const onSearch = (d, searchTerm = '') => { + return ( + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) + || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + ); + + return true; + } + + const filteredData = filterData(schema, data, filterList); + const searchedData = filteredData.filter(d => onSearch(d, searchTerm)); + const sortedData = sortData(schema, searchedData, sortingList); + setFormattedData(sortedData); + + if (page && pageSize) { + return new Promise(resolve => { + window.setTimeout(() => { + const start = (page - 1) * pageSize; + const end = start + pageSize; + const slicedData = sortedData.slice(start, end); + resolve({ + searchTerm, + schema, + count: sortedData.length, + data: slicedData, + }); + }, 2000); + }); + } + + return new Promise(resolve => { + window.setTimeout(() => { + resolve({ + searchTerm, + schema, + count: sortedData.length, + data: sortedData, + }); + }, 2000); + }); + } + + const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)}; + + const onDataExport = (data) => { + console.log("Exporting data", data); + } + + const globalActionTrigger = (data) => { + return (); + } + + const selectionActionRenderer = (selectedData, selectAll) => { + console.log('selectedData in output', selectedData, 'selectAll', selectAll); + return ( +
+ + +
+ ) + } + + return ( +
+ +
console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)} + withPagination={true} + pageSize={5} + onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} + /> + + + ); +}; +`; + +export default { + title: 'Components/Table/Selection/Bulk Actions', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx b/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx new file mode 100644 index 0000000000..bc809a8f3d --- /dev/null +++ b/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx @@ -0,0 +1,343 @@ +import * as React from 'react'; +import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; +import data from '@/components/organisms/grid/__stories__/_common_/data'; +import { Card, Table, Button } from '@/index'; +import { AsyncTable, SyncTable } from '../_common_/types'; +import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData'; +import { action } from '@/utils/action'; + +export const bulkActionsWithSpaceConstraint = () => { + const selectionActionRenderer = (selectedData, selectAll) => { + action('selectedData', selectedData, 'selectAll', selectAll)(); + return ( +
+
+ ); + }; + + const onDataExport = (data) => { + action('Exporting data', data)(); + }; + + const globalActionTrigger = (data) => { + return ; + }; + + return ( +
+ +
+ action( + `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( + selectedList + )} selectAll: ${selectAll}` + )() + } + headerOptions={{ + withSearch: true, + allowSelectAll: true, + selectionActionRenderer, + customSelectionLabel: 'user', + globalActionRenderer: globalActionTrigger, + }} + withPagination={true} + pageSize={5} + onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} + /> + + + ); +}; + +const customCode = ` +() => { + const translateData = (schema, data) => { + let newData = data; + + if (schema.translate) { + const translatedData = schema.translate(data); + newData = { + ...newData, + [schema.name]: typeof translatedData === 'object' ? { + ...newData[schema.name], + ...translatedData + } : translatedData + }; + } + if (typeof newData[schema.name] !== 'object') newData[schema.name] = { title: newData[schema.name] }; + + return newData; + } + + const filterData = (schema, data, filterList) => { + let filteredData = data; + if (filterList) { + Object.keys(filterList).forEach(schemaName => { + const filters = filterList[schemaName]; + const sIndex = schema.findIndex(s => s.name === schemaName); + const { onFilterChange } = schema[sIndex]; + if (filters.length && onFilterChange) { + filteredData = filteredData.filter(d => onFilterChange(d, filters)); + } + }); + } + + return filteredData; + }; + + const sortData = (schema, data, sortingList) => { + const sortedData = [...data]; + sortingList.forEach(l => { + const sIndex = schema.findIndex(s => s.name === l.name); + if (sIndex !== -1) { + const defaultComparator = (a, b) => { + const aData = translateData(schema[sIndex], a); + const bData = translateData(schema[sIndex], b); + return aData[l.name].title.localeCompare(bData[l.name].title); + }; + + const { + comparator = defaultComparator + } = schema[sIndex]; + + sortedData.sort(comparator); + if (l.type === 'desc') sortedData.reverse(); + } + }); + + return sortedData; + }; + + const paginateData = (data, page, pageSize) => { + const start = (page - 1) * pageSize; + const end = start + pageSize; + const paginatedData = data.slice(start, end); + return paginatedData; + }; + + const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; + const [formattedData, setFormattedData] = React.useState(data); + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: 300, + resizable: true, + separator: true, + tooltip: true, + translate: a => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName + }), + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + cellType: 'AVATAR_WITH_TEXT', + }, + { + name: 'email', + displayName: 'Email', + width: 350, + resizable: true, + sorting: false, + cellType: 'WITH_META_LIST' + }, + { + name: 'gender', + displayName: 'Gender', + width: 200, + resizable: true, + comparator: (a, b) => a.gender.localeCompare(b.gender), + cellType: 'STATUS_HINT', + translate: a => ({ + title: a.gender, + statusAppearance: (a.gender === 'Female') ? 'alert' : 'success' + }), + filters: [ + { label: 'Male', value: 'male' }, + { label: 'Female', value: 'female' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.gender.toLowerCase() === filter) return true; + } + return false; + }, + }, + { + name: 'icon', + displayName: 'Icon', + width: 100, + resizable: true, + align: 'center', + cellType: 'ICON', + sorting: false, + translate: _ => ({ + icon: 'events' + }) + }, + { + name: 'customCell', + displayName: 'Custom Cell', + width: 200, + resizable: true, + cellType: 'WITH_META_LIST', + sorting: false, + cellRenderer: props => { + return ( + <> + + + + ); + } + }, + ]; + + const fetchData = (options) => { + const { + page, + pageSize, + sortingList, + filterList, + searchTerm + } = options; + + const onSearch = (d, searchTerm = '') => { + return ( + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) + || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + ); + + return true; + } + + const filteredData = filterData(schema, data, filterList); + const searchedData = filteredData.filter(d => onSearch(d, searchTerm)); + const sortedData = sortData(schema, searchedData, sortingList); + setFormattedData(sortedData); + + if (page && pageSize) { + return new Promise(resolve => { + window.setTimeout(() => { + const start = (page - 1) * pageSize; + const end = start + pageSize; + const slicedData = sortedData.slice(start, end); + resolve({ + searchTerm, + schema, + count: sortedData.length, + data: slicedData, + }); + }, 2000); + }); + } + + return new Promise(resolve => { + window.setTimeout(() => { + resolve({ + searchTerm, + schema, + count: sortedData.length, + data: sortedData, + }); + }, 2000); + }); + } + + const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)}; + + const onDataExport = (data) => { + console.log("Exporting data", data); + } + + const globalActionTrigger = (data) => { + return (); + } + + const selectionActionRenderer = (selectedData, selectAll) => { + console.log('selectedData in output', selectedData, 'selectAll', selectAll); + return ( +
+
+ ) + } + + return ( +
+ +
console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)} + withPagination={true} + pageSize={5} + onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} + /> + + + ); +}; +`; + +export default { + title: 'Components/Table/Selection/Bulk Actions With Space Constraint', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/SelectAllRows.story.jsx b/core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx similarity index 91% rename from core/components/organisms/table/__stories__/SelectAllRows.story.jsx rename to core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx index 2d24390742..e19d0cc00c 100644 --- a/core/components/organisms/table/__stories__/SelectAllRows.story.jsx +++ b/core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx @@ -2,11 +2,11 @@ import * as React from 'react'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; import data from '@/components/organisms/grid/__stories__/_common_/data'; import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData'; import { action } from '@/utils/action'; -export const selectAllRows = () => { +export const selectionBehavior = () => { return (
@@ -15,6 +15,7 @@ export const selectAllRows = () => { fetchData={fetchData} withHeader={true} withCheckbox={true} + uniqueColumnName="email" onSelect={(rowIndex, selected, selectedList, selectAll) => action( `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( @@ -103,6 +104,7 @@ const customCode = ` }; const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; + const [formattedData, setFormattedData] = React.useState(data); const schema = [ { @@ -227,6 +229,7 @@ const customCode = ` const filteredData = filterData(schema, data, filterList); const searchedData = filteredData.filter(d => onSearch(d, searchTerm)); const sortedData = sortData(schema, searchedData, sortingList); + setFormattedData(sortedData); if (page && pageSize) { return new Promise(resolve => { @@ -265,10 +268,11 @@ const customCode = ` loaderSchema={loaderSchema} fetchData={fetchData} withHeader={true} + uniqueColumnName="firstName" headerOptions={{ withSearch: true, - allowSelectAll: true, customSelectionLabel: 'user', + allowSelectAll: true, }} withCheckbox={true} onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)} @@ -282,31 +286,13 @@ const customCode = ` }; `; -const description = ` - ### Note: - 1. Use **allowSelectAll** in headerOptions to select **All** the rows of the table. - 
-    headerOptions={{
-      allowSelectAll: true,
-    }}
-
- 2. Use **customSelectionLabel** in headerOptions to show custom label string in header on row selection.
- If no custom label is given then *'item'* is shown by default. *(for e.g: "Selected 5 items on this page")* - 
-    headerOptions={{
-      customSelectionLabel: 'user',
-    }}
-
-`; - export default { - title: 'Components/Table/Select All Rows', + title: 'Components/Table/Selection/Selection Behavior', component: Table, parameters: { docs: { docPage: { customCode, - description, props: { components: { AsyncTable, SyncTable }, exclude: ['showHead'], diff --git a/core/components/organisms/table/__stories__/CompressedTable.story.jsx b/core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx similarity index 98% rename from core/components/organisms/table/__stories__/CompressedTable.story.jsx rename to core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx index 7bff612aeb..dcfbeed6f1 100644 --- a/core/components/organisms/table/__stories__/CompressedTable.story.jsx +++ b/core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Card, Table, Button } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import { action } from '@/utils/action'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; @@ -240,7 +240,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Compressed Table', + title: 'Components/Table/Sizes/Compressed Table', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/StandardTable.story.jsx b/core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx similarity index 97% rename from core/components/organisms/table/__stories__/StandardTable.story.jsx rename to core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx index 7a1ffd74b7..dbdc881273 100644 --- a/core/components/organisms/table/__stories__/StandardTable.story.jsx +++ b/core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; export const standardTable = () => { @@ -201,7 +201,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Standard Table', + title: 'Components/Table/Sizes/Standard Table', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/TightStory.story.jsx b/core/components/organisms/table/__stories__/sizes/TightStory.story.jsx similarity index 97% rename from core/components/organisms/table/__stories__/TightStory.story.jsx rename to core/components/organisms/table/__stories__/sizes/TightStory.story.jsx index 3a36eab4e0..fe2d85905d 100644 --- a/core/components/organisms/table/__stories__/TightStory.story.jsx +++ b/core/components/organisms/table/__stories__/sizes/TightStory.story.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; export const tightTable = () => { @@ -203,7 +203,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Tight Table', + title: 'Components/Table/Sizes/Tight Table', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/states/DataTable.story.jsx b/core/components/organisms/table/__stories__/states/DataTable.story.jsx new file mode 100644 index 0000000000..7c8a9fc510 --- /dev/null +++ b/core/components/organisms/table/__stories__/states/DataTable.story.jsx @@ -0,0 +1,427 @@ +import * as React from 'react'; +import { Card, Table } from '@/index'; +import { AsyncTable, SyncTable } from '../_common_/types'; +import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; + +export const dataTable = () => { + const data = [ + { + claim_id: 'Q10000101', + claim_type: 'Professional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '03/27/2020', + last_dos: '03/30/2020', + firstName: 'Brooke', + lastName: 'Heeran', + }, + { + claim_id: 'Q10000102', + claim_type: 'Professional', + plan_name: 'MSSP Track 1', + insurance_name: 'Medicare', + first_dos: '03/24/2020', + last_dos: '04/30/2020', + firstName: 'Frazer', + lastName: 'Cathro', + }, + { + claim_id: 'Q10000103', + claim_type: 'Professional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '05/16/2020', + last_dos: '05/30/2020', + firstName: 'Lemmie', + lastName: 'Ciric', + }, + { + claim_id: 'Q10000104', + claim_type: 'Institutional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '12/27/2020', + last_dos: '12/30/2020', + firstName: 'Randy', + lastName: 'Boatwright', + }, + { + claim_id: 'Q10000105', + claim_type: 'Professional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '05/04/2020', + last_dos: '05/28/2020', + firstName: 'Rolando', + lastName: 'Cyples', + }, + { + claim_id: 'Q10000106', + claim_type: 'Institutional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '01/27/2020', + last_dos: '03/30/2020', + firstName: 'Lem', + lastName: 'Males', + }, + { + claim_id: 'Q10000107', + claim_type: 'Professional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '03/30/2020', + last_dos: '04/30/2020', + firstName: 'Sayres', + lastName: 'Adelberg', + }, + { + claim_id: 'Q10000108', + claim_type: 'Professional', + plan_name: 'MSSP Track 3', + insurance_name: 'Medicare', + first_dos: '02/27/2020', + last_dos: '03/30/2020', + firstName: 'Murray', + lastName: 'Bravington', + }, + { + claim_id: 'Q10000109', + claim_type: 'Institutional', + plan_name: 'MSSP Track 5', + insurance_name: 'Medicare', + first_dos: '03/17/2020', + last_dos: '03/30/2020', + firstName: 'Carin', + lastName: 'Robiou', + }, + { + claim_id: 'Q100001010', + claim_type: 'Institutional', + plan_name: 'MSSP Track 6', + insurance_name: 'Medicare', + first_dos: '09/27/2020', + last_dos: '12/27/2020', + firstName: 'Brina', + lastName: 'Pirie', + }, + ]; + + const schema = [ + { + name: 'claim_id', + displayName: 'Claim Id', + width: '12%', + separator: true, + }, + { + name: 'claim_type', + displayName: 'Claim Type', + width: '15%', + separator: true, + cellType: 'DEFAULT', + }, + { + name: 'insurance_name', + displayName: 'Insurance Name', + width: '15%', + separator: true, + }, + { + name: 'plan_name', + displayName: 'Plan Name', + width: '15%', + separator: true, + }, + { + name: 'first_dos', + displayName: 'First Date of Service', + width: '18%', + separator: true, + }, + { + name: 'last_dos', + displayName: 'Last Date of Service', + width: '18%', + separator: true, + }, + { + name: 'provider_name', + displayName: 'Provider Name', + separator: true, + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + translate: (a) => ({ + title: `${a.firstName} ${a.lastName}`, + firstName: a.firstName, + lastName: a.lastName, + }), + }, + ]; + + return ( + +
{ + return currData.filter( + (d) => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || + d.lastName.toLowerCase().match(searchTerm.toLowerCase()) || + d.claim_id.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withPagination={true} + pageSize={5} + /> + + ); +}; + +const customCode = `() => { + const data = [ + { + claim_id: 'Q10000101', + claim_type: 'Professional', + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "03/27/2020", + last_dos: "03/30/2020", + firstName: 'Brooke', + lastName: 'Heeran', + }, + { + claim_id: 'Q10000102', + claim_type: "Professional", + plan_name: "MSSP Track 1", + insurance_name: "Medicare", + first_dos: "03/24/2020", + last_dos: "04/30/2020", + firstName: 'Frazer', + lastName: 'Cathro', + }, + { + claim_id: 'Q10000103', + claim_type: "Professional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "05/16/2020", + last_dos: "05/30/2020", + firstName: 'Lemmie', + lastName: 'Ciric', + }, + { + claim_id: 'Q10000104', + claim_type: "Institutional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "12/27/2020", + last_dos: "12/30/2020", + firstName: 'Randy', + lastName: 'Boatwright', + }, + { + claim_id: 'Q10000105', + claim_type: "Professional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "05/04/2020", + last_dos: "05/28/2020", + firstName: 'Rolando', + lastName: 'Cyples', + }, + { + claim_id: 'Q10000106', + claim_type: "Institutional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "01/27/2020", + last_dos: "03/30/2020", + firstName: 'Lem', + lastName: 'Males', + }, + { + claim_id: 'Q10000107', + claim_type: "Professional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "03/30/2020", + last_dos: "04/30/2020", + firstName: 'Sayres', + lastName: 'Adelberg', + }, + { + claim_id: 'Q10000108', + claim_type: "Professional", + plan_name: "MSSP Track 3", + insurance_name: "Medicare", + first_dos: "02/27/2020", + last_dos: "03/30/2020", + firstName: 'Murray', + lastName: 'Bravington', + }, + { + claim_id: 'Q10000109', + claim_type: "Institutional", + plan_name: "MSSP Track 5", + insurance_name: "Medicare", + first_dos: "03/17/2020", + last_dos: "03/30/2020", + firstName: 'Carin', + lastName: 'Robiou', + }, + { + claim_id: 'Q100001010', + claim_type: "Institutional", + plan_name: "MSSP Track 6", + insurance_name: "Medicare", + first_dos: "09/27/2020", + last_dos: "12/27/2020", + firstName: 'Brina', + lastName: 'Pirie', + } + ]; + + const schema = [ + { + name: 'claim_id', + displayName: 'Claim Id', + width: '12%', + separator: true, + }, + { + name: 'claim_type', + displayName: 'Claim Type', + width: '15%', + separator: true, + cellType: "DEFAULT" + }, + { + name: 'insurance_name', + displayName: 'Insurance Name', + width: '15%', + separator: true, + }, + { + name: 'plan_name', + displayName: 'Plan Name', + width: '15%', + separator: true, + }, + { + name: 'first_dos', + displayName: 'First Date of Service', + width: '18%', + separator: true, + }, + { + name: 'last_dos', + displayName: 'Last Date of Service', + width: '18%', + separator: true, + }, + { + name: 'provider_name', + displayName: 'Provider Name', + separator: true, + filters: [ + { label: 'A-G', value: 'a-g' }, + { label: 'H-R', value: 'h-r' }, + { label: 'S-Z', value: 's-z' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + switch (filter) { + case 'a-g': + if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; + break; + case 'h-r': + if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; + break; + case 's-z': + if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; + break; + } + } + return false; + }, + translate: (a) => ({ + title: \`\${a.firstName} \${a.lastName}\`, + firstName: a.firstName, + lastName: a.lastName + }), + }, + ]; + + const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)}; + + return ( + +
{ + return currData.filter(d => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) + || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + || d.claim_id.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withPagination={true} + pageSize={5} + onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} + /> + + ); +}`; + +export default { + title: 'Components/Table/States/Data Table', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + title: 'Data table', + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/DisabledRow.story.jsx b/core/components/organisms/table/__stories__/states/DisabledRow.story.jsx similarity index 98% rename from core/components/organisms/table/__stories__/DisabledRow.story.jsx rename to core/components/organisms/table/__stories__/states/DisabledRow.story.jsx index dbe986ba9b..aadc1c67da 100644 --- a/core/components/organisms/table/__stories__/DisabledRow.story.jsx +++ b/core/components/organisms/table/__stories__/states/DisabledRow.story.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; import { action } from '@/utils/action'; @@ -281,7 +281,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Disabled Row', + title: 'Components/Table/States/Disabled Row', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx b/core/components/organisms/table/__stories__/states/LoadingState.story.jsx similarity index 61% rename from core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx rename to core/components/organisms/table/__stories__/states/LoadingState.story.jsx index 4e3708388f..ccea0bcc3f 100644 --- a/core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx +++ b/core/components/organisms/table/__stories__/states/LoadingState.story.jsx @@ -1,36 +1,23 @@ import * as React from 'react'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; -import schema from '@/components/organisms/grid/__stories__/_common_/schema'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; import { Card, Table } from '@/index'; import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; -export const syncLoaderSchema = () => { +export const loadingState = () => { const loading = true; - - const error = false; - const pageSize = 5; - const withCheckbox = true; - const applyLoaderSchema = true; - - const applySchema = false; - - const applyData = false; - return ( -
+
{ }; export default { - title: 'Components/Table/Variants/Sync Loader Schema', + title: 'Components/Table/States/Loading State', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx b/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx new file mode 100644 index 0000000000..62595a3c89 --- /dev/null +++ b/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx @@ -0,0 +1,327 @@ +import * as React from 'react'; +import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; +import { Card, Table, Menu, Avatar, Text } from '@/index'; +import { AsyncTable, SyncTable } from '../_common_/types'; +import { action } from '@/utils/action'; + +const data = [ + { + name: 'Asthma Outreach', + firstName: 'Brooke', + lastName: 'Heeran', + status: 'In Progress', + lastUpdated: 'June 20, 2020', + recipients: 11846, + _selected: true, + }, + { + firstName: 'Frazer', + lastName: 'Cathro', + status: 'Scheduled', + lastUpdated: 'June 19, 2020', + name: 'HbA1c Test due', + recipients: 12846, + }, + { + firstName: 'Lemmie', + name: 'ER Education', + lastName: 'Ciric', + status: 'Draft', + lastUpdated: 'May 19, 2020', + recipients: 118467, + _selected: true, + }, + { + firstName: 'Randy', + lastName: 'Boatwright', + name: 'Flu Vaccination', + status: 'Failed', + lastUpdated: 'March 19, 2020', + recipients: 10846, + }, + { + firstName: 'Rolando', + lastName: 'Cyples', + name: 'Well-child Visit', + status: 'In Progress', + lastUpdated: 'April 19, 2020', + recipients: 11847, + }, + { + firstName: 'Lem', + lastName: 'Males', + name: 'Annual wellness Visit', + status: 'In Progress', + lastUpdated: 'June 16, 2020', + recipients: 118100, + }, + { + firstName: 'Sayres', + lastName: 'Adelberg', + name: 'Flu Vaccination', + status: 'Draft', + lastUpdated: 'Dec 19, 2020', + recipients: 11848, + }, + { + firstName: 'Murray', + lastName: 'Bravington', + name: 'Well-child Visit', + status: 'Draft', + lastUpdated: 'April 19, 2020', + recipients: 11890, + }, +]; + +export const resourceTable = () => { + const statusAppearance = { + 'In Progress': 'info', + Scheduled: 'warning', + Draft: 'default', + Failed: 'alert', + }; + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: '30%', + cellType: 'WITH_META_LIST', + translate: (a) => ({ + title: a.name, + metaList: [`${a.recipients} recipients`], + }), + sorting: false, + }, + { + name: 'status', + displayName: 'Status', + width: '20%', + cellType: 'STATUS_HINT', + sorting: false, + filters: [ + { label: 'In Progress', value: 'In Progress' }, + { label: 'Scheduled', value: 'Scheduled' }, + { label: 'Draft', value: 'Draft' }, + { label: 'Failed', value: 'Failed' }, + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.status === filter) return true; + } + return false; + }, + translate: (a) => { + const status = a.status; + return { + title: status, + statusAppearance: statusAppearance[status], + }; + }, + }, + { + name: 'lastUpdated', + displayName: 'Last Updated on', + width: '30%', + sorting: false, + }, + { + name: 'user', + displayName: '', + sorting: false, + width: '20%', + cellRenderer: (props) => ( +
+ +
+ }> + + + Edit + + + Delete + + + +
+
+ ), + }, + ]; + + return ( + +
+ action( + `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( + selectedList + )} selectAll: ${selectAll}` + )() + } + headerOptions={{ + withSearch: true, + }} + onSearch={(currData, searchTerm) => { + return currData.filter( + (d) => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) || + d.lastName.toLowerCase().match(searchTerm.toLowerCase()) || + d.name.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withPagination={true} + paginationType="basic" + pageSize={4} + onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} + /> + + ); +}; + +const customCode = ` +() => { + const data = ${JSON.stringify(data.slice(0, 10), null, 4)}; + + const statusAppearance = { + 'In Progress': 'info', + 'Scheduled': 'warning', + 'Draft': 'default', + 'Failed': 'alert' + }; + + const schema = [ + { + name: 'name', + displayName: 'Name', + width: '30%', + cellType: 'WITH_META_LIST', + sorting: false, + translate: a => ({ + title: a.name, + metaList: [\`\${a.recipients} recipients\`] + }), + }, + { + name: 'status', + displayName: 'Status', + width: '20%', + cellType: 'STATUS_HINT', + sorting: false, + filters: [ + { label: 'In Progress', value: 'In Progress' }, + { label: 'Scheduled', value: 'Scheduled' }, + { label: 'Draft', value: 'Draft' }, + { label: 'Failed', value: 'Failed' } + ], + onFilterChange: (a, filters) => { + for (const filter of filters) { + if (a.status === filter) return true; + } + return false; + }, + translate: a => { + const status = a.status; + return ({ + title: status, + statusAppearance: statusAppearance[status] + }); + } + }, + { + name: 'lastUpdated', + displayName: 'Last Updated on', + width: '30%', + sorting: false, + }, + { + name: 'user', + displayName: '', + sorting: false, + width: '20%', + cellRenderer: (props) => { + const { data } = props; + return ( +
+ +
+ }> + + + Edit + + + Delete + + + +
+
+ ); + } + } + ]; + + return ( + +
+ console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`) + } + headerOptions={{ + withSearch: true + }} + filterList={{ + status: ['In Progress', 'Scheduled', 'Draft', 'Failed'] + }} + onSearch={(currData, searchTerm) => { + return currData.filter(d => + d.firstName.toLowerCase().match(searchTerm.toLowerCase()) + || d.lastName.toLowerCase().match(searchTerm.toLowerCase()) + || d.name.toLowerCase().match(searchTerm.toLowerCase()) + ); + }} + withPagination={true} + paginationType="basic" + pageSize={4} + onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} + /> + + ); +}; +`; + +export default { + title: 'Components/Table/States/Resource Table', + component: Table, + parameters: { + docs: { + docPage: { + customCode, + props: { + components: { AsyncTable, SyncTable }, + exclude: ['showHead'], + }, + }, + }, + }, +}; diff --git a/core/components/organisms/table/__stories__/DataTable.story.jsx b/core/components/organisms/table/__stories__/types/DataTable.story.jsx similarity index 99% rename from core/components/organisms/table/__stories__/DataTable.story.jsx rename to core/components/organisms/table/__stories__/types/DataTable.story.jsx index 5f2d95b63e..04e2cb0f0b 100644 --- a/core/components/organisms/table/__stories__/DataTable.story.jsx +++ b/core/components/organisms/table/__stories__/types/DataTable.story.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Card, Table } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; export const dataTable = () => { @@ -410,7 +410,7 @@ const customCode = `() => { }`; export default { - title: 'Components/Table/Data Table', + title: 'Components/Table/Types/Data Table', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/ResourceTable.story.jsx b/core/components/organisms/table/__stories__/types/ResourceTable.story.jsx similarity index 98% rename from core/components/organisms/table/__stories__/ResourceTable.story.jsx rename to core/components/organisms/table/__stories__/types/ResourceTable.story.jsx index df7b700b7a..bce2e1ed8e 100644 --- a/core/components/organisms/table/__stories__/ResourceTable.story.jsx +++ b/core/components/organisms/table/__stories__/types/ResourceTable.story.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema'; import { Card, Table, Menu, Avatar, Text } from '@/index'; -import { AsyncTable, SyncTable } from './_common_/types'; +import { AsyncTable, SyncTable } from '../_common_/types'; import { action } from '@/utils/action'; const data = [ @@ -307,7 +307,7 @@ const customCode = ` `; export default { - title: 'Components/Table/Resource Table', + title: 'Components/Table/Types/Resource Table', component: Table, parameters: { docs: { diff --git a/core/components/organisms/table/__stories__/variants/size.story.jsx b/core/components/organisms/table/__stories__/variants/size.story.jsx deleted file mode 100644 index 14dde8b353..0000000000 --- a/core/components/organisms/table/__stories__/variants/size.story.jsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; -import schema from '@/components/organisms/grid/__stories__/_common_/simpleSchema'; -import { Card, Heading, Table, Row, Column } from '@/index'; -import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; - -// CSF format story -export const size = () => { - const values = ['comfortable', 'standard', 'compressed', 'tight']; - - // to freeze the object for typescript - - return ( -
- - {values.map((v, index) => ( - - {v} -
- -
- - - - ))} - - - ); -}; - -const customCode = ` -() => { - const data = ${JSON.stringify(data, null, 4)}; - - const schema = [ - { - name: 'name', - displayName: 'Name', - width: 300, - resizable: true, - separator: true, - tooltip: true, - translate: a => ({ - title: \`\${a.firstName} \${a.lastName}\`, - firstName: a.firstName, - lastName: a.lastName - }), - cellType: 'AVATAR_WITH_TEXT', - }, - { - name: 'email', - displayName: 'Email', - width: 350, - resizable: true, - }, - ]; - - const values = ['comfortable', 'standard', 'compressed', 'tight']; - - return ( -
- - {values.map((v, index) => ( - - {v} -
- -
- - - - ))} - - - ); -}; -`; - -export default { - title: 'Components/Table/Variants/Size', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/variants/type.story.jsx b/core/components/organisms/table/__stories__/variants/type.story.jsx deleted file mode 100644 index 2fda0eeb6f..0000000000 --- a/core/components/organisms/table/__stories__/variants/type.story.jsx +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from 'react'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; -import schema from '@/components/organisms/grid/__stories__/_common_/simpleSchema'; -import { Card, Heading, Table, Row, Column } from '@/index'; -import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; -import { action } from '@/utils/action'; - -// CSF format story -export const type = () => { - const values = ['resource', 'data']; - - // to freeze the object for typescript - - return ( -
- - {values.map((v, index) => ( - - {v} -
- -
- action(`on-row-click:- rowIndex: ${rowIndex} data: ${JSON.stringify(rowData)}`)() - } - /> - - - - ))} - - - ); -}; - -const customCode = ` -() => { - const data = ${JSON.stringify(data, null, 4)}; - - const schema = [ - { - name: 'name', - displayName: 'Name', - width: 300, - resizable: true, - separator: true, - tooltip: true, - translate: a => ({ - title: \`\${a.firstName} \${a.lastName}\`, - firstName: a.firstName, - lastName: a.lastName - }), - cellType: 'AVATAR_WITH_TEXT', - }, - { - name: 'email', - displayName: 'Email', - width: 350, - resizable: true, - }, - ]; - - const values = ['resource', 'data']; - - return ( -
- - {values.map((v, index) => ( - - {v} -
- -
- action(\`on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)() - } - /> - - - - ))} - - - ); -}; -`; - -export default { - title: 'Components/Table/Variants/Type', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx b/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx deleted file mode 100644 index 8d250f3993..0000000000 --- a/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; -import schema from '@/components/organisms/grid/__stories__/_common_/simpleSchema'; -import { Card, Heading, Table, Row, Column } from '@/index'; -import { action } from '@/utils/action'; -import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; - -// CSF format story -export const withCheckbox = () => { - const values = [true, false]; - - // to freeze the object for typescript - - return ( -
- - {values.map((v, index) => ( - - {`withPagination: ${v}`} -
- -
- action( - `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify( - selectedList - )} selectAll: ${selectAll}` - )() - } - onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()} - /> - - - - ))} - - - ); -}; - -const customCode = ` -() => { - const data = ${JSON.stringify(data, null, 4)}; - - const schema = [ - { - name: 'name', - displayName: 'Name', - resizable: true, - separator: true, - tooltip: true, - translate: a => ({ - title: \`\${a.firstName} \${a.lastName}\`, - firstName: a.firstName, - lastName: a.lastName - }), - cellType: 'AVATAR_WITH_TEXT', - }, - { - name: 'email', - displayName: 'Email', - width: 350, - resizable: true, - }, - ]; - - const values = [true, false]; - - return ( -
- - {values.map((v, index) => ( - - {\`withPagination: \${v}\`} -
- -
console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)} - pageSize={15} - onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)} - /> - - - - ))} - - - ); -}; -`; - -export default { - title: 'Components/Table/Variants/With Checkbox', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/organisms/table/__stories__/variants/withPagination.story.jsx b/core/components/organisms/table/__stories__/variants/withPagination.story.jsx deleted file mode 100644 index 1d61556ee4..0000000000 --- a/core/components/organisms/table/__stories__/variants/withPagination.story.jsx +++ /dev/null @@ -1,127 +0,0 @@ -import * as React from 'react'; -import { Card, Heading, Table, Row, Column } from '@/index'; -import { action } from '@/utils/action'; -import data from '@/components/organisms/grid/__stories__/_common_/data'; -import schema from '@/components/organisms/grid/__stories__/_common_/schema'; -import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types'; - -// CSF format story -export const withPagination = () => { - const values = ['basic', 'jump']; - - // to freeze the object for typescript - - return ( -
- - {values.map((v, index) => ( - - {`paginationType: ${v}`} -
- -
action(`on-page-change:- ${newPage}`)()} - /> - - - - ))} - - - ); -}; - -const customCode = ` -() => { - const data = ${JSON.stringify(data, null, 4)}; - - const schema = [ - { - name: 'name', - displayName: 'Name', - resizable: true, - separator: true, - tooltip: true, - translate: a => ({ - title: \`\${a.firstName} \${a.lastName}\`, - firstName: a.firstName, - lastName: a.lastName - }), - filters: [ - { label: 'A-G', value: 'a-g' }, - { label: 'H-R', value: 'h-r' }, - { label: 'S-Z', value: 's-z' }, - ], - onFilterChange: (a, filters) => { - for (const filter of filters) { - switch (filter) { - case 'a-g': - if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true; - break; - case 'h-r': - if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true; - break; - case 's-z': - if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true; - break; - } - } - return false; - }, - cellType: 'AVATAR_WITH_TEXT', - }, - { - name: 'email', - displayName: 'Email', - width: 350, - resizable: true, - sorting: false, - }, - ]; - - const values = ['basic', 'jump']; - - return ( -
- - {values.map((v, index) => ( - - {\`paginationType: \${v}\`} -
- -
console.log(\`on-page-change:- \${newPage}\`)} - /> - - - - ))} - - - ); -}; -`; - -export default { - title: 'Components/Table/Variants/With Pagination', - component: Table, - parameters: { - docs: { - docPage: { - customCode, - props: { - components: { AsyncTable, SyncTable }, - exclude: ['showHead'], - }, - }, - }, - }, -}; diff --git a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx index 70c5153a3f..7f6bd5e3d1 100644 --- a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx +++ b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx @@ -419,7 +419,7 @@ import './style.css'; size="tiny" onClick={() => setSelectAllRecords(false)} > - Clear Selection + Clear selection ) }