From d74c3d91fa2370ec6d736de1df71a2c9b37989c5 Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Mon, 10 Feb 2025 17:58:23 +0400 Subject: [PATCH] feat(table): add support to expand nested rows in table --- .../grid/__stories__/_common_/data.ts | 1103 ----------------- .../nesting/WithNestedRows.story.jsx | 97 +- 2 files changed, 23 insertions(+), 1177 deletions(-) diff --git a/core/components/organisms/grid/__stories__/_common_/data.ts b/core/components/organisms/grid/__stories__/_common_/data.ts index 33b1621b4..74b9cc0f0 100644 --- a/core/components/organisms/grid/__stories__/_common_/data.ts +++ b/core/components/organisms/grid/__stories__/_common_/data.ts @@ -6,22 +6,6 @@ export default [ gender: 'Female', status: 'Failed', _expandNestedRow: true, - _nestedRows: [ - { - firstName: 'John', - lastName: 'Doe', - email: 'jdoe@altervista.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Bane', - lastName: 'Doe', - email: 'Bane.doe@altervista.org', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Frazer', @@ -29,22 +13,6 @@ export default [ email: 'fcathro1@ucla.edu', gender: 'Male', status: 'Failed', - _nestedRows: [ - { - firstName: 'Alice', - lastName: 'Smith', - email: 'asmith@ucla.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Bob', - lastName: 'Smith', - email: 'bob.smith@ucla.edu', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Lemmie', @@ -56,22 +24,6 @@ export default [ gender: 'Male', status: 'Completed', _expandNestedRow: true, - _nestedRows: [ - { - firstName: 'Charlie', - lastName: 'Brown', - email: 'cbrown@dmoz.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Lucy', - lastName: 'Brown', - email: 'lucy.brown@dmoz.org', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Randy', @@ -79,22 +31,6 @@ export default [ email: 'rboatwright3@arstechnica.com', status: 'Completed', gender: 'Male', - _nestedRows: [ - { - firstName: 'Dave', - lastName: 'Johnson', - email: 'djohnson@arstechnica.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Eve', - lastName: 'Johnson', - email: 'eve.johnson@arstechnica.com', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Rolando', @@ -102,22 +38,6 @@ export default [ email: 'rcyples4@biglobe.ne.jp', gender: 'Male', status: 'Failed', - _nestedRows: [ - { - firstName: 'Frank', - lastName: 'Miller', - email: 'fmiller@biglobe.ne.jp', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Grace', - lastName: 'Miller', - email: 'grace.miller@biglobe.ne.jp', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Lem', @@ -125,22 +45,6 @@ export default [ email: 'lmales5@admin.ch', gender: 'Male', status: 'Failed', - _nestedRows: [ - { - firstName: 'Hank', - lastName: 'Williams', - email: 'hwilliams@admin.ch', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Ivy', - lastName: 'Williams', - email: 'ivy.williams@admin.ch', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Sayres', @@ -148,22 +52,6 @@ export default [ email: 'sadelberg6@uol.com.br', gender: 'Male', status: 'Completed', - _nestedRows: [ - { - firstName: 'Jack', - lastName: 'Adelberg', - email: 'jack.adelberg@uol.com.br', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Jill', - lastName: 'Adelberg', - email: 'jill.adelberg@uol.com.br', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Murray', @@ -171,22 +59,6 @@ export default [ email: 'mbravington7@drupal.org', gender: 'Male', status: 'Failed', - _nestedRows: [ - { - firstName: 'Tom', - lastName: 'Bravington', - email: 'tom.bravington@drupal.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Jerry', - lastName: 'Bravington', - email: 'jerry.bravington@drupal.org', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Jena', @@ -194,22 +66,6 @@ export default [ email: 'jswatheridge8@npr.org', gender: 'Female', status: 'Failed', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Swatheridge', - email: 'anna.swatheridge@npr.org', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Swatheridge', - email: 'elsa.swatheridge@npr.org', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Annabel', @@ -217,22 +73,6 @@ export default [ email: 'anelsey9@google.com', gender: 'Female', status: 'Completed', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Nelsey', - email: 'olaf.nelsey@google.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Nelsey', - email: 'sven.nelsey@google.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Carin', @@ -240,1057 +80,114 @@ export default [ email: 'crobioua@skype.com', gender: 'Female', status: 'Completed', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Robiou', - email: 'kristoff.robiou@skype.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Robiou', - email: 'hans.robiou@skype.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Anson', lastName: 'Gamon', email: 'agamonb@economist.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Gamon', - email: 'anna.gamon@economist.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Gamon', - email: 'elsa.gamon@economist.com', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Brina', lastName: 'Pirie', email: 'bpiriec@stumbleupon.com', gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Pirie', - email: 'olaf.pirie@stumbleupon.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Pirie', - email: 'sven.pirie@stumbleupon.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Hermy', lastName: 'Dyett', email: 'hdyettd@boston.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Dyett', - email: 'kristoff.dyett@boston.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Dyett', - email: 'hans.dyett@boston.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Aime', lastName: 'von Hagt', email: 'avonhagte@nyu.edu', gender: 'Female', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'von Hagt', - email: 'anna.vonhagt@nyu.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'von Hagt', - email: 'elsa.vonhagt@nyu.edu', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Gusti', lastName: 'Haycock', email: 'ghaycockf@virginia.edu', gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Haycock', - email: 'olaf.haycock@virginia.edu', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Haycock', - email: 'sven.haycock@virginia.edu', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Mortimer', lastName: 'Kunneke', email: 'mkunnekeg@weather.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Kunneke', - email: 'kristoff.kunneke@weather.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Kunneke', - email: 'hans.kunneke@weather.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Barnie', lastName: 'Pohls', email: 'bpohlsh@columbia.edu', gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Pohls', - email: 'anna.pohls@columbia.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Pohls', - email: 'elsa.pohls@columbia.edu', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Elliot', lastName: 'Nealey', email: 'enealeyi@cocolog-nifty.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Nealey', - email: 'olaf.nealey@cocolog-nifty.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Nealey', - email: 'sven.nealey@cocolog-nifty.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Allsun', lastName: 'Gong', email: 'agongj@discuz.net', gender: 'Female', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Gong', - email: 'kristoff.gong@discuz.net', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Gong', - email: 'hans.gong@discuz.net', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Harwell', lastName: 'Kegan', email: 'hkegank@domainmarket.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Kegan', - email: 'anna.kegan@domainmarket.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Kegan', - email: 'elsa.kegan@domainmarket.com', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Gilles', lastName: 'Sandell', email: 'gsandelll@apache.org', gender: 'Male', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Sandell', - email: 'olaf.sandell@apache.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Sandell', - email: 'sven.sandell@apache.org', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Hilliard', lastName: 'Beamish', email: 'hbeamishm@shop-pro.jp', gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Beamish', - email: 'kristoff.beamish@shop-pro.jp', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Beamish', - email: 'hans.beamish@shop-pro.jp', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Charley', lastName: 'Kuschek', email: 'ckuschekn@dropbox.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Kuschek', - email: 'anna.kuschek@dropbox.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Kuschek', - email: 'elsa.kuschek@dropbox.com', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Danny', lastName: 'Churchin', email: 'dchurchino@bbc.co.uk', gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Churchin', - email: 'olaf.churchin@bbc.co.uk', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Churchin', - email: 'sven.churchin@bbc.co.uk', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Ervin', lastName: 'Chatelain', email: 'echatelainp@mac.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Chatelain', - email: 'kristoff.chatelain@mac.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Chatelain', - email: 'hans.chatelain@mac.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Milli', lastName: 'Joseph', email: 'mjosephq@merriam-webster.com', gender: 'Female', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Joseph', - email: 'anna.joseph@merriam-webster.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Joseph', - email: 'elsa.joseph@merriam-webster.com', - gender: 'Female', - status: 'Failed', - }, - ], }, { firstName: 'Greer', lastName: "O'Doherty", email: 'godohertyr@homestead.com', gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: "O'Doherty", - email: 'olaf.odoherty@homestead.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: "O'Doherty", - email: 'sven.odoherty@homestead.com', - gender: 'Male', - status: 'Failed', - }, - ], }, { firstName: 'Haroun', lastName: 'Martensen', email: 'hmartensens@skype.com', gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Martensen', - email: 'kristoff.martensen@skype.com', - gender: 'Male', - status: 'Completed', - }, - ], - }, - { - firstName: 'Brooke', - lastName: 'Heeran', - email: 'bheeran0@altervista.org', - gender: 'Female', - status: 'Failed', - _expandNestedRow: true, - _nestedRows: [ - { - firstName: 'John', - lastName: 'Doe', - email: 'jdoe@altervista.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Jane', - lastName: 'Doe', - email: 'jane.doe@altervista.org', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Frazer', - lastName: 'Cathro', - email: 'fcathro1@ucla.edu', - gender: 'Male', - status: 'Failed', - _nestedRows: [ - { - firstName: 'Alice', - lastName: 'Smith', - email: 'asmith@ucla.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Bob', - lastName: 'Smith', - email: 'bob.smith@ucla.edu', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Lemmie', - lastName: 'Ciric', - email: { - title: 'lciric2@dmoz.org', - metaList: ['First', 'Second'], - }, - gender: 'Male', - status: 'Completed', - _nestedRows: [ - { - firstName: 'Charlie', - lastName: 'Brown', - email: 'cbrown@dmoz.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Lucy', - lastName: 'Brown', - email: 'lucy.brown@dmoz.org', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Randy', - lastName: 'Boatwright', - email: 'rboatwright3@arstechnica.com', - status: 'Completed', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Dave', - lastName: 'Johnson', - email: 'djohnson@arstechnica.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Eve', - lastName: 'Johnson', - email: 'eve.johnson@arstechnica.com', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Rolando', - lastName: 'Cyples', - email: 'rcyples4@biglobe.ne.jp', - gender: 'Male', - status: 'Failed', - _nestedRows: [ - { - firstName: 'Frank', - lastName: 'Miller', - email: 'fmiller@biglobe.ne.jp', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Grace', - lastName: 'Miller', - email: 'grace.miller@biglobe.ne.jp', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Lem', - lastName: 'Males', - email: 'lmales5@admin.ch', - gender: 'Male', - status: 'Failed', - _nestedRows: [ - { - firstName: 'Hank', - lastName: 'Williams', - email: 'hwilliams@admin.ch', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Ivy', - lastName: 'Williams', - email: 'ivy.williams@admin.ch', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Sayres', - lastName: 'Adelberg', - email: 'sadelberg6@uol.com.br', - gender: 'Male', - status: 'Completed', - _nestedRows: [ - { - firstName: 'Jack', - lastName: 'Adelberg', - email: 'jack.adelberg@uol.com.br', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Jill', - lastName: 'Adelberg', - email: 'jill.adelberg@uol.com.br', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Murray', - lastName: 'Bravington', - email: 'mbravington7@drupal.org', - gender: 'Male', - status: 'Failed', - _nestedRows: [ - { - firstName: 'Tom', - lastName: 'Bravington', - email: 'tom.bravington@drupal.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Jerry', - lastName: 'Bravington', - email: 'jerry.bravington@drupal.org', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Jena', - lastName: 'Swatheridge', - email: 'jswatheridge8@npr.org', - gender: 'Female', - status: 'Failed', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Swatheridge', - email: 'anna.swatheridge@npr.org', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Swatheridge', - email: 'elsa.swatheridge@npr.org', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Annabel', - lastName: 'Nelsey', - email: 'anelsey9@google.com', - gender: 'Female', - status: 'Completed', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Nelsey', - email: 'olaf.nelsey@google.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Nelsey', - email: 'sven.nelsey@google.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Carin', - lastName: 'Robiou', - email: 'crobioua@skype.com', - gender: 'Female', - status: 'Completed', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Robiou', - email: 'kristoff.robiou@skype.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Robiou', - email: 'hans.robiou@skype.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Anson', - lastName: 'Gamon', - email: 'agamonb@economist.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Gamon', - email: 'anna.gamon@economist.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Gamon', - email: 'elsa.gamon@economist.com', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Brina', - lastName: 'Pirie', - email: 'bpiriec@stumbleupon.com', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Pirie', - email: 'olaf.pirie@stumbleupon.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Pirie', - email: 'sven.pirie@stumbleupon.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Hermy', - lastName: 'Dyett', - email: 'hdyettd@boston.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Dyett', - email: 'kristoff.dyett@boston.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Dyett', - email: 'hans.dyett@boston.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Aime', - lastName: 'von Hagt', - email: 'avonhagte@nyu.edu', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'von Hagt', - email: 'anna.vonhagt@nyu.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'von Hagt', - email: 'elsa.vonhagt@nyu.edu', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Gusti', - lastName: 'Haycock', - email: 'ghaycockf@virginia.edu', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Haycock', - email: 'olaf.haycock@virginia.edu', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Haycock', - email: 'sven.haycock@virginia.edu', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Mortimer', - lastName: 'Kunneke', - email: 'mkunnekeg@weather.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Kunneke', - email: 'kristoff.kunneke@weather.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Kunneke', - email: 'hans.kunneke@weather.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Barnie', - lastName: 'Pohls', - email: 'bpohlsh@columbia.edu', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Pohls', - email: 'anna.pohls@columbia.edu', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Pohls', - email: 'elsa.pohls@columbia.edu', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Elliot', - lastName: 'Nealey', - email: 'enealeyi@cocolog-nifty.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Nealey', - email: 'olaf.nealey@cocolog-nifty.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Nealey', - email: 'sven.nealey@cocolog-nifty.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Allsun', - lastName: 'Gong', - email: 'agongj@discuz.net', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Gong', - email: 'kristoff.gong@discuz.net', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Gong', - email: 'hans.gong@discuz.net', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Harwell', - lastName: 'Kegan', - email: 'hkegank@domainmarket.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Kegan', - email: 'anna.kegan@domainmarket.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Kegan', - email: 'elsa.kegan@domainmarket.com', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Gilles', - lastName: 'Sandell', - email: 'gsandelll@apache.org', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Sandell', - email: 'olaf.sandell@apache.org', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Sandell', - email: 'sven.sandell@apache.org', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Hilliard', - lastName: 'Beamish', - email: 'hbeamishm@shop-pro.jp', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Beamish', - email: 'kristoff.beamish@shop-pro.jp', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Beamish', - email: 'hans.beamish@shop-pro.jp', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Charley', - lastName: 'Kuschek', - email: 'ckuschekn@dropbox.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Kuschek', - email: 'anna.kuschek@dropbox.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Kuschek', - email: 'elsa.kuschek@dropbox.com', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Danny', - lastName: 'Churchin', - email: 'dchurchino@bbc.co.uk', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: 'Churchin', - email: 'olaf.churchin@bbc.co.uk', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: 'Churchin', - email: 'sven.churchin@bbc.co.uk', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Ervin', - lastName: 'Chatelain', - email: 'echatelainp@mac.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Chatelain', - email: 'kristoff.chatelain@mac.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Hans', - lastName: 'Chatelain', - email: 'hans.chatelain@mac.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Milli', - lastName: 'Joseph', - email: 'mjosephq@merriam-webster.com', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Anna', - lastName: 'Joseph', - email: 'anna.joseph@merriam-webster.com', - gender: 'Female', - status: 'Completed', - }, - { - firstName: 'Elsa', - lastName: 'Joseph', - email: 'elsa.joseph@merriam-webster.com', - gender: 'Female', - status: 'Failed', - }, - ], - }, - { - firstName: 'Greer', - lastName: "O'Doherty", - email: 'godohertyr@homestead.com', - gender: 'Female', - _nestedRows: [ - { - firstName: 'Olaf', - lastName: "O'Doherty", - email: 'olaf.odoherty@homestead.com', - gender: 'Male', - status: 'Completed', - }, - { - firstName: 'Sven', - lastName: "O'Doherty", - email: 'sven.odoherty@homestead.com', - gender: 'Male', - status: 'Failed', - }, - ], - }, - { - firstName: 'Haroun', - lastName: 'Martensen', - email: 'hmartensens@skype.com', - gender: 'Male', - _nestedRows: [ - { - firstName: 'Kristoff', - lastName: 'Martensen', - email: 'kristoff.martensen@skype.com', - gender: 'Male', - status: 'Completed', - }, - ], }, { firstName: 'Desiree', diff --git a/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx b/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx index d74ad5ab1..8be2d0e78 100644 --- a/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx +++ b/core/components/organisms/table/__stories__/nesting/WithNestedRows.story.jsx @@ -130,74 +130,6 @@ const customCode = ` }, ]; - const nestedRowSchema = [ - { - 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; - }, - }, - ]; - const nestedRowRenderer = (props) => { const { schema, @@ -207,17 +139,34 @@ const customCode = ` expanded } = props; + const noteList = ['Call Note', 'Visit note', 'Generic note', 'Ad-hoc task']; + + /* + // style.css + .SubList-wrapper { + margin-left: 40px; + background-color: #fcfafa; + } + */ + if (rowIndex % 2) { return false; } + return (
- - + + + + {noteList.map((note, key) => { + return ( + + {note} + + + ); + })} +
); }