Add checkboxes to hide and show react-table columns

package.json

@@ -9,7 +9,8 @@
     "formik": "^2.2.9",
     "history": "^5.2.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.1.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-bootstrap": "^2.2.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
@@ -26,6 +27,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.1.10",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.2",
     "@types/react-table": "^7.7.9",

src/components/beneficiary/Beneficiaries.tsx

@@ -7,9 +7,7 @@ export default function Beneficiaries() {
   const columns = React.useMemo(() => tableColumns, []);
 
   return (
-    <div
-      style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
-    >
+    <div>
       Beneficiaries
       <Table columns={columns} data={data} />
     </div>

src/components/program/ProgramListComponent.tsx

@@ -86,14 +86,9 @@ function ProgramListComponent() {
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        Beneficiaries
+      {/* react-table for programs */}
+      <div>
+        Programs
         <Table columns={columns} data={data} />
       </div>
       <Link to="request/list">Requests</Link>

src/components/volunteer/Volunteers.tsx

@@ -9,9 +9,7 @@ export default function Volunteers() {
   const columns = React.useMemo(() => tableColumns, []);
 
   return (
-    <div
-      style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
-    >
+    <div>
       Volunteers
       <Table columns={columns} data={data} />
     </div>

src/components/volunteer/data.tsx

@@ -2,107 +2,221 @@
 const tableRows = [
   {
     id: 1,
-    name: 'Joshua Joe',
+    firstName: 'Joshua',
+    lastName: 'Joe',
     email: '[email protected]',
     phone: '+1657435678',
     postalCode: '10007',
     timeCommitment: new Date('2022-03-11').toString(),
   },
   {
     id: 2,
-    name: 'Jenney Ren',
+    firstName: 'Jenney',
+    lastName: 'Ren',
     email: '[email protected]',
     phone: '+1357475678',
     postalCode: 'M4V',
     timeCommitment: new Date('2022-01-21').toString(),
   },
   {
     id: 3,
-    name: 'Neck Abd',
+    firstName: 'Neck',
+    lastName: 'Abd',
     email: '[email protected]',
     phone: '+9647504315501',
     postalCode: '42001',
     timeCommitment: new Date('2022-06-15').toString(),
   },
   {
     id: 4,
-    name: 'Joseph Ashwin',
+    firstName: 'Joseph',
+    lastName: 'Ashwin',
     email: '[email protected]',
     phone: '+156779875678',
     postalCode: 'P5S',
     timeCommitment: new Date('2022-02-08').toString(),
   },
   {
     id: 5,
-    name: 'Pedro Filipe',
+    firstName: 'Pedro',
+    lastName: 'Filipe',
     email: '[email protected]',
     phone: '+3890546789',
     postalCode: '9870F',
     timeCommitment: new Date('2022-11-22').toString(),
   },
   {
     id: 6,
-    name: 'Shayan Chowdhury',
+    firstName: 'Shayan',
+    lastName: 'Chowdhury',
     email: '[email protected]',
     phone: '+86475067890198765',
     postalCode: '18P1',
     timeCommitment: new Date('2022-10-05').toString(),
   },
   {
     id: 7,
-    name: 'Ethan Strominger',
+    firstName: 'Ethan',
+    lastName: 'Strominger',
     email: '[email protected]',
     phone: '+1657435678',
     postalCode: '10007',
     timeCommitment: new Date('2022-01-09').toString(),
   },
   {
     id: 8,
-    name: 'Beracah Lam',
+    firstName: 'Beracah',
+    lastName: 'Lam',
     email: '[email protected]',
     phone: '+6879767475678',
     postalCode: 'M0076',
     timeCommitment: new Date('2022-04-01').toString(),
   },
   {
     id: 9,
-    name: 'Lakshay Agrawal',
+    firstName: 'Lakshay',
+    lastName: 'Agrawal',
     email: '[email protected]',
     phone: '+89022267878121',
     postalCode: '0P01',
     timeCommitment: new Date('2022-12-25').toString(),
   },
   {
     id: 10,
-    name: 'Shafaat Razin',
+    firstName: 'Shafaat',
+    lastName: 'Razin',
     email: '[email protected]',
     phone: '+87654321989',
     postalCode: 'U10T',
     timeCommitment: new Date('2022-08-05').toString(),
   },
-];
-
-// Hard coded columns
-const tableColumns = [
   {
-    Header: 'Name',
-    accessor: 'name', // accessor is the "key" in the data
+    id: 11,
+    firstName: 'Joshua',
+    lastName: 'Joe',
+    email: '[email protected]',
+    phone: '+1657435678',
+    postalCode: '10007',
+    timeCommitment: new Date('2022-03-11').toString(),
+  },
+  {
+    id: 12,
+    firstName: 'Jenney',
+    lastName: 'Ren',
+    email: '[email protected]',
+    phone: '+1357475678',
+    postalCode: 'M4V',
+    timeCommitment: new Date('2022-01-21').toString(),
+  },
+  {
+    id: 13,
+    firstName: 'Neck',
+    lastName: 'Abd',
+    email: '[email protected]',
+    phone: '+9647504315501',
+    postalCode: '42001',
+    timeCommitment: new Date('2022-06-15').toString(),
+  },
+  {
+    id: 14,
+    firstName: 'Joseph',
+    lastName: 'Ashwin',
+    email: '[email protected]',
+    phone: '+156779875678',
+    postalCode: 'P5S',
+    timeCommitment: new Date('2022-02-08').toString(),
+  },
+  {
+    id: 15,
+    firstName: 'Pedro',
+    lastName: 'Filipe',
+    email: '[email protected]',
+    phone: '+3890546789',
+    postalCode: '9870F',
+    timeCommitment: new Date('2022-11-22').toString(),
+  },
+  {
+    id: 16,
+    firstName: 'Shayan',
+    lastName: 'Chowdhury',
+    email: '[email protected]',
+    phone: '+86475067890198765',
+    postalCode: '18P1',
+    timeCommitment: new Date('2022-10-05').toString(),
+  },
+  {
+    id: 17,
+    firstName: 'Ethan',
+    lastName: 'Strominger',
+    email: '[email protected]',
+    phone: '+1657435678',
+    postalCode: '10007',
+    timeCommitment: new Date('2022-01-09').toString(),
+  },
+  {
+    id: 18,
+    firstName: 'Beracah',
+    lastName: 'Lam',
+    email: '[email protected]',
+    phone: '+6879767475678',
+    postalCode: 'M0076',
+    timeCommitment: new Date('2022-04-01').toString(),
   },
   {
-    Header: 'Email',
-    accessor: 'email',
+    id: 19,
+    firstName: 'Lakshay',
+    lastName: 'Agrawal',
+    email: '[email protected]',
+    phone: '+89022267878121',
+    postalCode: '0P01',
+    timeCommitment: new Date('2022-12-25').toString(),
   },
   {
-    Header: 'Phone',
-    accessor: 'phone',
+    id: 20,
+    firstName: 'Shafaat',
+    lastName: 'Razin',
+    email: '[email protected]',
+    phone: '+87654321989',
+    postalCode: 'U10T',
+    timeCommitment: new Date('2022-08-05').toString(),
   },
+];
+
+// Hard coded columns
+const tableColumns = [
   {
-    Header: 'Postal Code',
-    accessor: 'postalCode',
+    Header: 'Name',
+    columns: [
+      {
+        Header: 'First Name',
+        accessor: 'firstName', // accessor is the "key" in the data
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+      },
+    ],
   },
   {
-    Header: 'Time Commitment',
-    accessor: 'timeCommitment',
+    Header: 'Info',
+    columns: [
+      {
+        Header: 'Email',
+        accessor: 'email',
+      },
+      {
+        Header: 'Phone',
+        accessor: 'phone',
+      },
+      {
+        Header: 'Postal Code',
+        accessor: 'postalCode',
+      },
+      {
+        Header: 'Time Commitment',
+        accessor: 'timeCommitment',
+      },
+    ],
   },
 ];