{"_id":"@asemirsk/table","_rev":"27-d26548403fa3d3fd70a7ffaaad811a6a","time":{"created":"2022-04-04T11:45:01.423Z","1.0.0-alpha-3.9.0":"2022-03-15T12:56:41.586Z","modified":"2022-05-25T09:17:54.305Z","1.0.0-alpha-3.1.0":"2022-03-15T13:54:17.269Z","1.0.0-beta.2":"2022-03-15T14:25:12.927Z","1.0.0-beta.3":"2022-03-15T14:37:42.803Z","1.0.0":"2022-03-15T14:40:39.250Z","1.0.1-beta.0":"2022-03-15T14:44:47.028Z","1.0.0-alpha-5.3.0":"2022-03-15T16:03:39.963Z","1.0.0-alpha.0":"2022-04-04T11:45:02.007Z","1.0.0-beta.5":"2022-04-04T13:57:41.597Z","1.0.0-beta.6":"2022-04-08T20:00:53.194Z","1.0.1-beta.6":"2022-04-08T20:05:04.949Z","1.0.1":"2022-04-08T20:09:45.726Z","1.0.2-beta.0":"2022-04-08T20:19:15.886Z","1.0.2":"2022-04-08T20:22:23.735Z","1.0.3":"2022-04-08T20:26:27.693Z","1.1.0":"2022-04-19T15:07:16.577Z","2.0.1-beta.0":"2022-04-29T14:35:20.043Z","2.0.1-beta.1":"2022-04-29T14:41:40.745Z","2.0.3-beta.0":"2022-04-29T14:49:50.459Z","2.0.3-beta.1":"2022-04-29T14:51:44.055Z","2.0.5-beta.0":"2022-04-29T15:06:51.183Z","2.0.6-beta.0":"2022-05-02T10:08:18.661Z","3.0.0":"2022-05-02T10:21:46.525Z","1.0.0-beta.16":"2022-05-06T09:17:17.084Z","1.0.0-canary-24-22.0":"2022-05-25T08:46:24.561Z","1.0.0-canary-24-23.0":"2022-05-25T09:07:58.110Z","1.0.0-canary-24-24.0":"2022-05-25T09:17:54.223Z"},"name":"@asemirsk/table","dist-tags":{"alpha":"1.0.0-alpha.0","latest":"3.0.0","next":"1.0.0-beta.16","canary-24":"1.0.0-canary-24-24.0"},"versions":{"1.0.0-alpha.0":{"name":"@asemirsk/table","version":"1.0.0-alpha.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-alpha.0+28ce15a","@asemirsk/fclasses":"1.0.0-alpha.0+28ce15a","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"28ce15a6b1c49e6f984d59ff1db29bac050fe78d","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-alpha.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WY5zYHONaIVhgd1nLmFf3Mtd2t7KABGVlQO0FzUiR1f64fmgSNVMSDjcuXrM0mwT0jr8d8dP/LldioiCV40LwA==","shasum":"ea2c5e0f72d1979918a35f094a3c490f5b26ceac","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-alpha.0.tgz","fileCount":14,"unpackedSize":397563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv4PpHriWLOhBNQ5yKbJbas2wQU37G+B8U2EpaJgXgZgIgJJX6YlVMW3vr/Wbmgx58fU1cc6JdwHinf8RnxxmCozY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSto+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQwBAAkM+NRoP0AHlXLOf2gqIjX/QmSWSk7MiAFFz7qRG3Wuy3+mPV\r\nv6IsHOiUaaKD3i8WvitxY/WGQu7R26+y1V7PJVDnnqdt3UV6OAw9U62EPlmC\r\nRISI3F85K6b7KKSqMwN6rdCIYVU4HvEnUr6y4pYNfW0s1AFo6vHSM57ZgUiD\r\nGiq2hXC0orirl2Sw9i596IvlN4WW4Lww/bhWUWpwqxBBil1qqDK6k1kxCTO1\r\n/EisV5K2zQFm7TUCD7DvE1oid+7tR7kjO06T5QGnRo9z3siXEhYjMq4pX+Ge\r\nP7PuGwiuC0/dudtmbu07i5/vX4tJiojEdLn1J6fQOzAzGVhrJYiBLJJAY5jf\r\nQDtMwIgCAfZ3zW3sKU/y7Vb7ZaxyXJ0w/OVBgXddBHroQaR8OXUeqdrDtQNC\r\nbzT5pI/UXLvD8p5ja92PFUxdQWm4c7myN1n7WAhHWYnMjyC4cbcLMxNMcnKA\r\nOIrgObBRye57zIfK31gVmHrPJtJGLRdwAY+p9mo7ON12N34nasJ4QbW9QXcx\r\n5ysZEVIpBFS3dnKKMvVA6+xQ0KNxCeBCnLzaq1eJBzLvjszQla5mI7eYt0Se\r\nAQj9tW+7viAlS3KrvirK+6Z7dlviYU9jvBur+rQkCd0WOFq6z2ADgI1mIvvO\r\n2gs8EQfvg12YyooHHlKKsYUyEbV+WVv3RnA=\r\n=jMjl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-alpha.0_1649072701522_0.18293581947929716"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"@asemirsk/table","version":"1.0.0-beta.5","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"^1.0.0-beta.5","@asemirsk/fclasses":"^1.0.0-beta.5","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"e6beb3c3e2c8fcff324e0e741ec5746fc55ec312","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-beta.5","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-FyXD9KOf/Hce1XgTu6aR7FbHy/WqBipkYz5rrWdEON+z4Jh7vyXGw6qqQKp3e+uh4GcjHVeD3c2FxMsKUY75/A==","shasum":"1c5f4a63f85ac72e4d5a1aec7642a84782b85e00","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-beta.5.tgz","fileCount":14,"unpackedSize":397538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWsdAt5raPUyacZ7tUT2O95hgh30v2pyOxMq4wRxEjzQIhAOG8vdJ/oHPIZrVvMgBG8rpvf3FIATuG9mY/TZdzote0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSvlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq23g/+LUXnjfIp7DVWuCrUklkGpeXnK93gIClNYShAQyVfmF4OjxsI\r\nR7klU4HUx+O24oba1OO9/O0P8S+kv+qld5Of81apxzTTxZgnzjTSqNa0hHlH\r\nxQo1M4Yv567UAhbRTb4DhCUdQot7IK6tbOE8IoCvP5tw4RIzGCOZ0dPwK1t6\r\nsmXx8V1mg3zGYuCmRuUNmbrFWGLuLLB8KLoCCOeBVJc+NPbwLseCMhBAf7it\r\n0ePG2f7o0uCWTitOwK5HqbQK2g6qWGOEiCvmg5nABVYpSpz8MHqXFakoN8x5\r\ntlhl2+B5Yl2pojAx/p+VYhYEVwRYby4wJDUssysb/cfAnBQbLBc12l5OCF0O\r\ngP0IM6KmCZH8DP0PqbG+J+NXZJSofqp98mwtu0ZdwcGrm4ZwVwnfZZUqAetH\r\nDyU85DNluaRxzmLUuGbS//prPflE6xp+7hKYS4nriEDJGdYaZ4sIFosvu7wB\r\n8boytD3aetinsveJKfWq+jfreofnyHsVo8W9fdZm1t1i2SEjoYEt2bG3gKpD\r\naMoQGmdSR/wHEHaEUTRWUbDXzd0gQF5sCNjIh8QbVz3Fj/lzGjUkdv3CQfjB\r\nGJK82qHfAOrWPdjBu9OlE20ZBfL/xWvK1xrLHDRRGIevzIHcmFQJomPHXusB\r\n6DXh0s1xp9Bm/PppwMJfcVL6WdoIJVZXuEs=\r\n=4Itm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-beta.5_1649080661417_0.042731127667104296"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"@asemirsk/table","version":"1.0.0-beta.6","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^1.0.0-beta.6","@asemirsk/fclasses":"^1.0.0-beta.6","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"cbd97725152f2362bb86e6d4bba02043e3c4570e","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-beta.6","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-JrsxGsS50kdVaZTNRlJbwx1D3uF2BMJgNw1+eEuaUm4OlK+CTbW15eTF6ar4ve14Z/dYte6kiSQoTcvBaC0wOQ==","shasum":"7ab2af4860a31d5fdcee15fe0370fdae19b5ed46","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-beta.6.tgz","fileCount":14,"unpackedSize":397576,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdwRmDOSOKGunjarhzcSMNOedGgLKqw2q2OspcsxKeggIhAMZhHNnFJ9Yg1v/LCsJQ06pg2CdDbDXo9Astcn9ANhCc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJR1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWYhAAkKBN+8dhsDXUd7NbN7TqtgoHi7F3i5wHKHMt0uMyj2fN8Rde\r\nsqGnnZrH0g8LgUnf5wOGzBdbSoArIP6MOjqvU+ug6fx6rSs85Iq6MdE6Sk6w\r\nJHSu+rAUTykWgqRvEGmmN9XgweFozmrEklVpAXYZWFS3gIUWBbJWas14VURL\r\n9i0eCs6ocR1Na64nsL0/x/3uXlDNcmcd/e8/LKglioyJ1QUmytmdi6Ri4K9v\r\nRKD0TIQjsauycVVYZviwyeCv2lsVT5aDAlbqL99WilYe0Oq8iMBrkA55L8pS\r\nZHtyADPAdCpCuygT+8UdDp7CsjRD9P+Fd2ZtaBOWD+a3ktUAxr232vTHFq62\r\nrdeOicXoq+tF6wOW0xoW5J2GT9tKqIsiIpUY5IDaxxOTz1dXN2k3tj9Y1xB3\r\n8ZnAN/XtboKzo0oWfjujNCOevNFhXcqAdmC/NJpq+pT2JJaF50umgi+lpx4V\r\negfChrWmc8otFnbmyrti0Om8RlKB88WVbKMqxZME/dG9Eea2nVN36Dj9aYG1\r\nWl8c2t5UABbtRrv/80ortI57mU6aJjSgLwEdZHug3lScSmUS4VwKqNm5RyYB\r\nz+WhHwS1k/hkySI0egfQeUI7/0cN0vsmfzO6K1n27Nq0aHz6bRdLSmUaVy/U\r\neL6RWFzicrqBLlwh1YM5Ncf08v+o86xtS6A=\r\n=dVbv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-beta.6_1649448053005_0.44862867596367173"},"_hasShrinkwrap":false},"1.0.1-beta.6":{"name":"@asemirsk/table","version":"1.0.1-beta.6","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.1-beta.6","@asemirsk/core":"^1.0.1-beta.6","@asemirsk/fclasses":"^1.0.1-beta.6","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"dfbcb3dab592c76bd48c138c275c1e27fbd9ca1d","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.1-beta.6","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-EsqGQK/u0vbisY7VSWsfp6KZfxGEYXa+FiVZt5HoKlEo3PevWs/S5Gea7JB7OKNcxtKdgqQxkr/+1EJGyQQcDw==","shasum":"a6c640dd73aea9be8c62617066691200ced75c06","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.1-beta.6.tgz","fileCount":14,"unpackedSize":397576,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFyPd/x9IjUOK13l5PG6owyFBMJ/JgjS2Niio3OQfd93AiEAjCPeSiSNkcrVsP5qiF6iUkMLxv9Kjp+gdd4uDzmq6PU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJVxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg0A//URymle31J+pBuqzxkLilEquax8R1BnkxD4jHgru8NuRmHgAb\r\n5RgkuKFtOl6pLg+vDctYw3PA1EqHy5rJbkbOVUMrSj2b15kzjITe3U5uWCGg\r\nkApDnrleIkYqTFML4/cSbDvE3L4MCjNVZ7Vj983gC8ZaxPUMCvoPpsEj20C9\r\nGBawGNfQBoO8WPCLHakv0mN0UJCuXECMgK1cpEwZUbFOYgE2NbKUTG7c13NK\r\n7KO8X8zeDQHpOi/mePbXXpGI8qOrO1pIKp94CkoWFrpTUs0k2d1q6e5Pwavy\r\nnfAuO5Mz9gMmreKOdovA9hHBZV+9cbK47DbGUfOzeuVbEnN1vOgn1VcIRq7r\r\nXdSuiBmW3cE8DIJzqulQ3332sMYEneZUxlmzB30CxLiZUtIFse3dn2ApNWem\r\nIOeb6WT58if4fQkRfti7t/dR2cEKCXodLDj/mrttdteNwLp6q10644jzHVy3\r\n90aGdWjw0to3uM+vgObyGxq4qCaka2L/XTagpJbJ075P5sxutUkPUuH2bzt5\r\n28hLEWh2ZrvvWC8Qwf6j5E6ufMhw2eRM50qzyYIzikxevU1+Gg2D1dIbp3v8\r\nwiAjwhpLknrQWXH0BhlvlZujyZJuo14JaxkaY1ALjycv07JyJG6CTSea0ZtB\r\nH4HYuA77HBDs2KewikN4fDRKxbKGfhrMfEE=\r\n=h5H5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.1-beta.6_1649448304757_0.9785317777773934"},"_hasShrinkwrap":false},"1.0.1":{"name":"@asemirsk/table","version":"1.0.1","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.1","@asemirsk/core":"^1.0.1","@asemirsk/fclasses":"^1.0.1","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"b943f745d8dc223a872b770f79f3e0db78f43486","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-tZw/S1slxDsu7DnnBtRrmBiMcfl5mCfzWMfGxgWzdQLRtPo/d/4SH8zVgi+/5mvo5IirhFLU/QKtvqSNH1a6QA==","shasum":"5300349726e5796b11938305127a9a91786aa82a","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.1.tgz","fileCount":14,"unpackedSize":397548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbOhQ29aYPM3hhNOdrlnPed9tXKorNRQO6itH5vfigyAiAyPaTYwGqxyEdjX+osZVjWbJkG0kH2vPh2kniZKxeg3Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJaJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2nQ/9Gc9dIXEKnd1CTvMCRtPOYlkP4tWkTpOG5yeVHPeqHkfsphuZ\r\nffPrNM/CxHpHf4f2FkJSQ16v4dRruU5GgdORLfWF2uc5y7/HVW4756NCn+Qp\r\nqTWrxSw23rQI5YCUtNsv03kS+b5ZGkM4+sCcIakmUFQU/PO3U/ROZRoIjNF1\r\nUzsGM3mvuRl/TiJOV/EBS4tkk6+2Jeil4iecOWP4A9ihnli/1x+KV7zt7/T2\r\nykcFK13CTwoQn767kYlr5u8npGYnc3pG0RcpjiV7rxqJAJA0bW7L/8M1mTlD\r\n+swkQA0ei4eDKadaNq9Esbz/6NMw71hEL6m63dLiWMRMBLlFXs/mWKPoIAqU\r\ndFFQJzny9SfspKuGekSNr/tiFFD1fxNTrQ6iJCbOJQgXdoBodgKuAtYq6Jyb\r\ndvFRP0ZiIIufX4MsTR46iJz03zlWxnbakgrweo1AQZYiYCcPP8UFiCJsB7W/\r\n+Wd04DskWjJKEc+zK+AAWQ55CZ3/hfrxPvBrz55SGf4WKofWHwxWm1/MJdrp\r\nBHjLM5M6BkffjB7amVYH3PX77O0AANWV3hF4RxvYNpoSA4XboQABx3rczpna\r\nIAHnylm+V2amswperrllqXQKuVNPkwDy+LS7fcUoEOCH/9K1TRivpTv2ovHE\r\ns+L4//UONGF8K7wk2JZ0mK4BuSmI/oAnEeA=\r\n=MT12\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.1_1649448585526_0.7888919685289619"},"_hasShrinkwrap":false},"1.0.2-beta.0":{"name":"@asemirsk/table","version":"1.0.2-beta.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2-beta.0","@asemirsk/core":"^1.0.2-beta.0","@asemirsk/fclasses":"^1.0.2-beta.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"da62659a8fb42aa89cdc8cae2f148c8dd8db5dcb","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.2-beta.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xbdqA63eLHZSO94QiTGK70ps3tzYOBU9tP1MLGqHmgE73TLhh9sTeucxFzJmMBjtxdqbV5TzZbVX0CxeeqLFoA==","shasum":"d1e9a2f1f205ece841e1360088fb74bab285dec4","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.2-beta.0.tgz","fileCount":14,"unpackedSize":397576,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVMVM67CEzE1yOno2Mn/j9T7nUIBb3XFxe2wbLJmhaEAiEArU6B5xBuiKwxddbaaIiy9kzC+lmbiDjgAAU59wLbLt0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqekQ/8DnvN5ao4PgprPOkI+E5Ky3j/m4c/JXSIPEnvBGtMVCpV+7IV\r\ndIBzgqcvzS/japVj7DJ3Cttxym78gib/HubirmSCmBxCoo/Ta68srED4OZfW\r\n7S36lo/hTsIcqR4S0uamwF6x1Ue5esBjjjAxLgqOJq7vGwaeE0KFbHWsMWCo\r\nVa/si3g8/wGS0BCiwp6H9US8ejO1OIYlO4cGYMw4trFCmThmdFAxTFgTT+kR\r\n8+xalWItukkIcKK7LJvLfGwx4dte3A/yeXGfSE3PgIcthtw8qt/ADSRmhcrJ\r\nY2oZg75J14WGDFeMVIIXk0g+rhh0QK2IRzKuFPZL7IPYgwlUZhjxgT+EEVTJ\r\nwoyskCpJERtxvLXidigS2p1S+5XgvAbheDBu07e/EOvyB4REKi83NjURVb9F\r\nGRhEGsuouGQypsbT+9Q8ggc2KEhdmr7VpcLTT7G0yzFjW1xY/E3nV5fhjMaE\r\nun8lDtPvoNfX1NP6jeCCkORP8o7V79occEDDrnoHaoCGIeQESaakn+y9hxsZ\r\n3A0DGVJnFhR7oDVXc7SEI0B7qa7aK4ZzXzBawBq4u+lehEwac7JyNbT9FSoz\r\nnWmHJfpxSED+u5En06G1SqpuySz1k8dcm5X+Kkuk/IH1QJ0OfdMSZF0SWBLs\r\nikJXiYCindAz+aw6yrFC9wNH22Z+ukx1wJU=\r\n=zUzL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.2-beta.0_1649449155644_0.008839711003195916"},"_hasShrinkwrap":false},"1.0.2":{"name":"@asemirsk/table","version":"1.0.2","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2","@asemirsk/core":"^1.0.2","@asemirsk/fclasses":"^1.0.2","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"19cad7cb078a3029c7b40248078ddfa4d413bdcc","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.2","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WlGhL35PYWm/2k9NSPkGJzfcYBIAky1h1EVpdZUtr/UcBjxVHjvhOVKDqAwmNw1qviiVaFzD9OxvW09eMCCwqg==","shasum":"d9305fea40107c3106918aced58d540e604c6384","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.2.tgz","fileCount":14,"unpackedSize":397548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNiDCM7iwOjp8U/73mp3yF2bfyMPUW7KW+JlbuLDU3BgIhAIWtmGNmvlixKe9nlB/EuKGGoUuWinD2mu3aDvI1/yMa"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJl/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvFhAAnUjE1u9S01d4nUvxNlY7pyO3D7BCBI8vB/CcXPow8YIk8sC5\r\nsochEG0q4qtfS2X8XfynuzmEs+kVesLwxykOpIwDjInFkARYsI+uFgV6KHA+\r\nfHqpjwqEcnqSI0up2zzy6BlVxjlFVP1AN/USLlQ6hyS5m4hefGeVBEZuZw+Y\r\np4e+PbAlVOOH85EW87pNwuKWmBaf8GOcMcy5V00b7p4Boa4Dq729ldCXjmLt\r\nw4k+B5C+qVfmj56sb9Cl0Y8tqlgMKtYYcWY9aXG590161ZAYcLW+EtZH91IJ\r\nFJnPSWdyGQWUILle2WaKh561CUx6FdfAYkcyJXlPA6DhYKRRIQOA5BrDePBc\r\nGTQl3IhAKc9vOCgbHSW/YHGSm6cPBWdLBVJQehZec3dJKnJgdu6kLHw8b3hP\r\njqtO59rkxDsI2HPEHMi7pYAKWtU9H/H1xyNXv3G8FOBX6MpTVxwl5reqPDvz\r\nieWTSbPHe9t5a7+JgYcYOAFL7QGIZkUOhRDcTYRYb3Ys9sRsTY+GAuD7T4iu\r\naBagWRN5TVQdn4af2lZO4uaRRZYfzy5kvcrkKrUZNg3dV1vIINsec82gnwzi\r\n5qhr3B6bbjDnUoxuCDmHLNiwT8I1rx24AlHtDdKkf3LlNhGky4FyUMXTrmre\r\nvLPm9JjZUidzexP7j74nEr5qvSFTnxzCv5Q=\r\n=ErtL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.2_1649449343573_0.8631887570183705"},"_hasShrinkwrap":false},"1.0.3":{"name":"@asemirsk/table","version":"1.0.3","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2","@asemirsk/core":"^1.0.3","@asemirsk/fclasses":"^1.0.3","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"b46d91ae36b8631daaeaf0e17b4197086a98c2f9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.3","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-E6zR0csz32WZM0/N+fd4H6ig6SmIA6Zwh5KNMWoWMtmUpBvE4BPEE3INzkXAK3YBx5dvTP5Kb4g8UGscUbHPPQ==","shasum":"04f233ff8cbe8efbdb1a1e82de82fcf2396d3281","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.3.tgz","fileCount":14,"unpackedSize":397548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwl8w52XFz76ncO/jJOWrDBOl2UVccHcgfOZGW8AHxEQIhAOztHAo6g/06NvroAh6wDJeUuCw1NsOe6WKT1BNoJeT1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJpzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJzQ/5AOoxGeMn4uFus9u7+yOanRJ19GZXGRzyjRrUGd7DccRRrt6y\r\n3JwcxrR78GK3cODC5OnZNFmS/9dFJkwTxOZGtyJNUB4k0oWF+oC5Ih4r5uVE\r\n3nEjuq5iYGEfX9cojtYiJwqnmLf8lyw0iHolclrLBRD2NxbIo5H+qRpZk02T\r\nezqllbiRX7eUTNOIRgjG8CBSY/uuDa5Onh6/OFV6GK+Fk99el/RxhSM/jNR5\r\n2y1qU1NRbRZQ/XEoB4/9L5dgdheuLFgziDY5HXwdt9JhQYFTiWIX8UAjBzDP\r\ncdPXOk+fV5EvOFeFoyb2qTnHChRI+0vpXznTg6FLVOjhaozR72JYc3/m9+5V\r\nFPOuxftsWJtm4qYT3DNeTZn2wcLepyyHg4l9xgWecvXt4Sh+dEz2dK3lqoVv\r\nraxLYciJVnfYPRJbMOLWIX7bvSgnkqsxUdPDytzKhG7M4sIp5XPvmW2hX8N8\r\nxFGiGXfJWXB50vQeaFh1jEnbS708Q5GIi5pYJvezSlcPLVn/CaxO3hiw1oJP\r\n1/oeaytEh03j6MU5I8w5j1Rx0LeWLs9ap5cnU3Nx6e59pemD+R8cLlWOp2Qk\r\npGnrVfEaMpp5K/8FJNIri7rN/lFswpmJzzSNltok0VbMGF+uYztDDhyf5iyu\r\nwqDAs7wtoLixts6UkfLaVBnZM8LkgldfLwM=\r\n=8/Dw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.3_1649449587479_0.07131946906519793"},"_hasShrinkwrap":false},"1.1.0":{"name":"@asemirsk/table","version":"1.1.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.1.0","@asemirsk/core":"^1.1.0","@asemirsk/fclasses":"^1.1.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"e767bae774cc17eba5d92b638b7628cdc9236086","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.1.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-99zWjVc67xaIHR5DWgZMxfKWvuqSuofV0+ZlPoEZK9JvASrfHFeIoSmVVuV23tyNXMDYDMPPzVxoQDEg2v/19g==","shasum":"2f97ad92eb8eaa0fa6d7247eaaa7cbf5b326cffd","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.1.0.tgz","fileCount":15,"unpackedSize":398382,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD04yPAd2KFLzI5UFqfss9CT+BPMdXagPwMV7TDhFbvNQIgQ1JqckFEodatGB12srt/ZQQgAYcHyEFdFt7aWZgRgcI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxIw//XgcyL1I23DCQu+S49V6MMe3BpkRgj8LqkMTW2lOKCzw9xe4W\r\nuB1DkxkFynpDoJF4h9sMQI2Rs8n0hJU2cvGOS1INbpWNMvoQT8VqEL1iKXIA\r\nc0WxJ95O2k9jj3qVJgobQ+EA8NwDJPRSEFBxC7tW1W039wmKNQ6umKyjksaB\r\n6J9RFOW385+NkEuz+pj4hAwhDavxUNDRu1DRCfwbWMbGBQJTj7aG8LpwMq+0\r\nZRne4vr3B6XM4j+FwVimFqcVL0leez68bJuvlvcS2oKyOdxmfpqAo7B7iTqI\r\n6y/2aMrzvPIS1GWq2nP3i/4JLJminv1HJl368QkWne3E0kSQb0wl8GO/xp5F\r\nuubtRByOJzmZ/QJBJf1qr+tscP3PFDWIXGYvHkhdouGgvk7WGC4Xx+GeIfGE\r\nMQHRZy7ffRiDpbt2/1XxBOENKB7qBxOLIkFe1nZxZjQXUYXlBlDIZddLyq2A\r\nFbsQ7fyIorK4W7jwRev0S28W3npuA2hWxgj719IcpgLrSBo7swryl3WQv2u7\r\n4nrvwAlJjkPRbawdQ/eItz6v2llebxEk22gcbN3tvJ/H7xQQoZF/nU7SpZms\r\n0e0WV778nUX2fTMgry5uJ+1eae2qoaIomywqCaGnF5bU9TLp9XlGiIVjmUDE\r\n1j5F5PWLNqbf5eanNEDrO718Vhsg9cCqzAM=\r\n=a7q+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.1.0_1650380836338_0.7426001326220351"},"_hasShrinkwrap":false},"2.0.1-beta.0":{"name":"@asemirsk/table","version":"2.0.1-beta.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.1-beta.0","@asemirsk/fclasses":"^2.0.1-beta.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"2aebb64eab582696b080b48c5f3475c2759f6408","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.1-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-BCkHcTNGNCx9+7hVjwSwwn5S0PpMbmdRK7eDz2cEKJoXyDfwOhpzwYao/SNgVUc42Fl7PVoQO60XslCN2c517Q==","shasum":"8d495f8c39995b39eab9eb3c90706d8eab5e8584","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.1-beta.0.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5CwCEhfR6lrYgvONSt2QUQfR/B+oiu17SOPuLpSpVFwIgFqckqkSHzl8lFighRNZCn2XgLWicaIxCmKMK8k3MzWo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/eoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Zw//flkuBXvEb6LK15Q4MQiIuF3l1qW3HThdWGzFkS/aXa+mCy6A\r\nkHEDfVpj3OBXG66nPH7FauoZkQf8zMEAG4M8dSY3HFU4KipkihoP4di0g3St\r\n7JXg3nPPxRBDyh6hKCGsj1NPpZoawpw9XL8QtxUIvAslNDz6aUmpFEVD5iuU\r\n57Q0GthSFp0/sZs76/irTjJClDC/xORGvX3qj0fAEmCH5UFRBYJj0fsIMTan\r\njNy9euipc1ujopzJgW71T4sXKAQdtvFoLFXU3sS+QB7jnSX7TmuDK615TC/Z\r\n9PAbFwe78Yv/bB0Qjec+YL2l5NJHTP69wL7HO1YX+9ONByghZVmR81R+KkVj\r\nCSCGjYsRWjnp0li9SMxjz+HR010ZZmsJUgZceqKyoinc54MmbdAUxFyGeeVy\r\nQQv5nHbTFJKk/4HwgFHEUdi+rTClKg+kPTIU7Yrsyv4cSS6YTrF8WasSEEoD\r\nNf7jASUhKHb41G187nMNU1dVwQUAAdonI5eQQs94dEajVe+ELZnramsbzN02\r\nJBCqUdt3m7ExHbpD29BP4jnFAF/TdpTWJWqbUw7mIlbdQCcPC0IHkq/FInhE\r\nittRDeQAIoyx6nRqR4zdlks5CDpbN8Y7PFiDLLfCgPjnOCsVbUZiyYthX6YP\r\nqfYdtzjM1i+vCQM0XLaUUN2iRA8eOVJKLSA=\r\n=EJ4P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.1-beta.0_1651242919806_0.960040587699764"},"_hasShrinkwrap":false},"2.0.1-beta.1":{"name":"@asemirsk/table","version":"2.0.1-beta.1","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.1-beta.1","@asemirsk/fclasses":"^2.0.1-beta.1","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"8651151ffab8ce28ac9424085c9325e3485ba177","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.1-beta.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-nm19Qli+XX0LHBaP8FMtLOhaJ9RrJLbn8y/UqcqIqR3Nj4Z/KoqVxYcH866ALX/UGYYca8XO7oi85Gu66nojoA==","shasum":"412313c23b218c6fc895a4d2dcdce54ebe7b6978","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.1-beta.1.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ83uPVlyeEQ0g9+ttTZgtxEX7uBwL4oHaenS/Anf0MAIhAOIhAXRINzdYufof1mNlgTL3sn7y6Ja8BwcSavPzdJQl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/kkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWTQ/+LDyewWK9KHAG2uCSxx6BmgNhNPt5AxFpeV3HtTeuaIAQY946\r\nZozsJWpoZJ0wVA6Vvty84h6lGYX0DwOGXZGlYMKKj0Y8BBvOBk5lLPNCsYZz\r\nApvfnoZku8rMgG1R1DpB5DZ/3hszI2WRQZSTfcA5qUNViRX/yo/ztN4xqpwF\r\nenQ8umPXUBq1+KzQI4rjz1ThNoLemM1+/gD63AVJugklddzX8z/kBXSztVVy\r\nqN0lpF+27uy0echIQ5QILUB3qIA3yLP4UgvomCrhbZGmJXgm+3QtgEt+vE+1\r\nhHDbvH49QqkXt0slq1YpVw+FTGqg5kgWXD8PJdqjSoR3btx6wmQx6tSoTGj9\r\nfHjvU76uKcvsh0Khvj8jP6Q/xqLmHo65qopSB3Df/4vpWAQ/h4M6OkWj/3OM\r\ndcaoMtYe5m2ofKsJynvjcT7KmolIheSakK17m8pQkzjERQ8wgmiimYEsXGHt\r\nlqZFIJneERsK/UDvrdMj5r6xCjugJZFwwD69X6A1CgEqyoOZmyQgOfUk4/bS\r\nGc2pG1+TboiA/kEWL5mRcSGCIi8ZkTnrhkZIabq6vkZY2Eda8ds3MxdFO1Ek\r\nha80ypA/04/BI7S6CETcmlpDpzcIqM6fcocXuGdfpGk+fp8wEWSaqyQ4VtDj\r\n+7OImj2ZQD/qFBQJsmHX/1QX/oX4NpMjNjs=\r\n=btaZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.1-beta.1_1651243300491_0.281196817368637"},"_hasShrinkwrap":false},"2.0.3-beta.0":{"name":"@asemirsk/table","version":"2.0.3-beta.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.3-beta.0","@asemirsk/fclasses":"^2.0.3-beta.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"95b0d427717d1ca0bfedc22f3f23323acc223e94","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.3-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-9XVVcZ+xUBBpAmdTrsOHSfWdrm6zzZitPEJPYIfbALBSMx6pDgW3IEbwNUaAfsUwPiHlCJPpJn40jpvLoXsIAQ==","shasum":"df173fd0a18a3eecfc0e98188003787e51a1ab23","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.3-beta.0.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFJvRPknMzZrb1WjsBbVcwst7NBbW0I33hVAijSSgwPAiEA5K/88O3Erz3dTewAV1Kf5cblCiqBz49wfG5JhYD+x1E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/sOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf2A/+IbANvlN5+t9YjkAn/EU4KyjTRP4TggXanuv99xBuaTQ84DzU\r\nRXTV/CO7Do4J9kGbyi3gNl8zvCu7AajHD9ra1uOSPhWX3Yq7BhCLDfbmpWld\r\nvztUcspqpWQjL/Zjv1bTAKjW7nTAk2RnvUmgI4ktSgICIKUPpgd9NvGii2jq\r\nEZy383is5m3qYsyJh3EjVKf3zLDquVkLpLy+jaCSGJWWKcKkGWudMiOjNGXf\r\nAirZPhMoNqD5T0cw57NDPTLFVFk25KHIwIthlMumR8VB5ZBPjL9At/tM/yct\r\nS7+KINc9pRq3V6OB/cL0yuuzZMCvfzUD6xnwVEm4uYwoA6LwmxLVhIHMF01Y\r\n8qIh6j1HaUxf7pcoRNjk+WCIhXNl4TuAQZwefF0QruiVD4eZWBL16z+l0h0t\r\nlya+yaYXpPrZrFzhBgr4rbduux2v9k9ljeQPTRAZ1oA/i0Anv2BWmtlX5VQ6\r\nnM3KwELCNt9g3YqSp1AhuhVhGkGnco2J1AIh+qz+dHdic9u9I2aUmmNPmjpN\r\nBShiDR9wE7pnjCqYrpB6e1YhLB82yZ80k+NEUFmZC/mQa16bY6lD5gkzNc4D\r\nMxMa40bT0BJNvEPBqX8U5OC5lpZ/zqLx0UhoL8ji2lynCn7qGvFjncbvQ2Sh\r\njfuKq11+JKTZZiO1rhVS46ZDMDJekg2GO0I=\r\n=/5je\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.3-beta.0_1651243790301_0.4182759092717241"},"_hasShrinkwrap":false},"2.0.3-beta.1":{"name":"@asemirsk/table","version":"2.0.3-beta.1","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.3-beta.1","@asemirsk/fclasses":"^2.0.3-beta.1","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"1be4d3bb997d192b34b946c04f840a2a82b34a5b","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.3-beta.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7AKGg0pCYouMUjV9IdTQwtrKUjSXckN3Oop+Ad7NNPzt/vSOlUqwBiU3mQghGUht7XqNur7gvQ2EMwnxGT7mAw==","shasum":"a692b050a6cfb442e34c207bc5e7e1e7812393ea","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.3-beta.1.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyNH/lVmixNuPQm1+HsTJV2pfwEYhXaY4MW9ko5B6m6AIhAJscVrfRcBwhbpT+6/wv9M84AEUfGV9EGxZxVGNFg8DW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/uAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYkQ//WWPImKlVVBHjYILG5gnaMeMcbl/XWm/SdzzCxNI3LELDiejl\r\nYeO8P6R7TGnHH8iXe3VNXLvBPIq5f9fjW/CqEoUTKwry302thVTrkXdYvAz3\r\nqTdqj+RBxIW2RkHlKuMwA+ZBTejD+o8GnlsDfZ5Mxt/vjo46WKCCHRX1dcMs\r\nEzkIHb2AwDeVVficmxNk/U/nlawUS+e7mGOxSOfq5ZKManfKX/FqLRSS8zd2\r\nTu2CuQr7pBHLYntsmXhK6/CTgw+H9ijilLdniZEWAaj+4EjDuCLMANIYg8QN\r\nb+zYP5b9JCUNMHc9R3Z7YSF58x263qA9V0198B/Nbxus3T5vnJaoTgF+M0KL\r\nOm7rgoQrQ3bP97iyJ7OeGtANCuKKwBy92EsCRK426BuSQzFsO/mWzutVnFAb\r\nH3fF6KGcBdJbcVQJSlm9hNxDW8qz6Mr+Sv1OQubm6QUW+BuAk/5N2sY1nwW5\r\nZVmzC0Yn3qlw13Ymhh+iLYPJEiWscNouPo8QjhxPYB06zP2Da/hZOrqBHWSH\r\nm3rHZYgiblEZPMFBLnQ5TQfDPJnFdZxleuP+F/76v8LPJKhauqRIwDXei6Q0\r\n7cz+IuxbOByo5/gIadxBVi0nBqfxUXn0ZBK9MSoGPLzrzbkYYTvo6JSejcRU\r\nAR6fLm3gC81vyqnxqVIDm7wi1bQk8Mv/lis=\r\n=SqGb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.3-beta.1_1651243903883_0.14625936739211243"},"_hasShrinkwrap":false},"2.0.5-beta.0":{"name":"@asemirsk/table","version":"2.0.5-beta.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.5-beta.0","@asemirsk/fclasses":"^2.0.5-beta.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"9b047b3a72ac828e21a6e31cb9a8e77e5225f5c9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.5-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-xmSsTWWGkMrnAQ5IjGiWvAd2ldAwYSG66nGeA6WLUStsp32RSIVuEbAiLEah67aet/NhLaypZ9z68UtdhSGKjg==","shasum":"ee4885f63b492bb41286b5aca140d15f4004fb5a","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.5-beta.0.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEY7nuCATow+taWtOmDmfz3JtB76b5mK4neZ95N3XNpiAiEAsEKFDuX3LQOvZOWtgKv7gQaoPAlCbh5aq5oBIs0Km9E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/8LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Pw//YmpZqEETHNemHHtiK31uBD/6l3INCdAzf4fXrsQqJoy+pNKB\r\nF1QyTIF3oLMNmHghk2BD/fnuAJi4uvm1KGk6R3F62xfFchEfwem4i5jPNYB4\r\noUMv9LPWj8gtm6bxzHm3nqSick8xsJadCMofPdyxu8LZjp/DsBBsDcbLYf48\r\nkrCiy8Prf9KCI7vfwacvruZrL0NA5V3QqAMbaSrtrHvchlrMlUXLQltlHa5+\r\n5VmawsAeF5QLkTCvHVJPK+U34WhT6iVOR8N01E91zAzQCXgMryD09ljKvl8q\r\nFE9LPFOgIsISx5aRjFg0nuizypDCLhzOF1PVDdBsBw/piqWqorhStmHFREWC\r\nSllkzjkS2Xg0Vzg/JLpX0DZefPDB1bEvKrCPxTwMlNfA5OceNcC1g1InkNrx\r\nYqtT027y28no9nxTgIUsyF92q8PvgOL9TCBXqHks1iTq/GD0MQHtmcFEZL6W\r\nL02Chd2YRVxQPXQDczVZ3VPqP/puzfDUl1rRW5/zK5+VG5+gITOWYE0XlCt9\r\n0Y+qa5714c6wnhb3FTCDAXdH1tFMpSS9KmFP1La1BhNeVnfEJkqLZmlw0bvv\r\njMDxOHGIuyjZ0FBKvprK7h20NKdTXoUTIgrx5pmkp38B5OabPvWRMAtUTWo3\r\nHen7jk32M4StQqplwH+pHDSNtaRfso6kvmU=\r\n=AV8D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.5-beta.0_1651244810984_0.026946075259366875"},"_hasShrinkwrap":false},"2.0.6-beta.0":{"name":"@asemirsk/table","version":"2.0.6-beta.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.6-beta.0","@asemirsk/fclasses":"^2.0.6-beta.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"e98b014aabae41353460b67b25ad4d50f0133fca","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@2.0.6-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-9nRc14KMYtTjNPwZ67Yk+JU3eE26fEeB3nwacKfmSxXvnjfr5+ujwZCilXL5YLPEPBWoVMsD9ZsKRMivASGEew==","shasum":"9d5a0afcacd92ac5dd19ab3ade6d6f74f77cbb9a","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-2.0.6-beta.0.tgz","fileCount":15,"unpackedSize":398410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNrO3RiFxiYylS2f87eJr35NHUVbQmbQbaTTuWNx9BZAIgHqeD959kwO8fqunpT7m36UTmli7QNpquUX4ifkZwA/s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib62SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonSRAAn6L4ieV/nwjO9QyX773wwQa+fq3DoHk0ifXIiqlmHJg/rtM9\r\nvlrVoA5e+6ge+11s13ozOrsCCn3JMl1fsQlyNaquMgrij3Yc5WRe6nD+5aGU\r\no+HvddLuQMF2CdOPeozG5KDKEx0am5iOWMupVhZkZWhsyZV8QWKYuQT5VJ2e\r\nKrSD8oiHfoL/ldtTgXV5B75n5qDE7PTo2/xDfbEsTrKr7pskqaX2TNwcCxGt\r\njO8yZ6LRlb2t9/x6eHTMt8X0qY3N7Cqk4rqYNZ99ENvxo0fM+Mbv8dYlaPNc\r\n/aFI0AD7DOBU46gdgw76H+uBgcFJxz+12yDbO8+ga2Vfmd3ldFeRvRywzaLg\r\niGYHcmnAOSAoBzdaDiF2/gDM9an+DawmYZh7ZXjvt05gWW7xHxftbBJ4mBE1\r\nHJ2hnkyfSpiCOMhM8p2V0lgTvF4tfx4vX3mlh7U7NMRGXhYy3Xf3a9PZRuvW\r\nyt4Mijb0+LF++5MPLMgg4JQbYSwMZaq9KukgAsQzr5RevitCG99nEb5Y5kJl\r\neXjw+oNSjunjtkv8U28DLRvqwZvGcg9CbOrWgY2FtOjQ4BIuyIXB95FQEswt\r\nMgxb1GW9hnOJIJBzop6xwt6UUawQCBWUAsl2oZHRs2qvxNkDuRXA+1ccibgY\r\nvbvHgLnxmkcGh67n8i63H0vm03tm/cYycW0=\r\n=IPa0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_2.0.6-beta.0_1651486098418_0.92858869978828"},"_hasShrinkwrap":false},"3.0.0":{"name":"@asemirsk/table","version":"3.0.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^3.0.0","@asemirsk/fclasses":"^3.0.0","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"6cf8b4df75f61c7e648a17bd5eafcd3965785c77","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@3.0.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-VP+6D5gV9TYKnoq3xCHzwUhjyXL2uFmi5iVjxwcrk66S1Rxzb25bt12bahzznP+0OgeNa1Ub+R5mT4ELFxleNA==","shasum":"b769430ba6f568f54e8b5c775910be109ed171f5","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-3.0.0.tgz","fileCount":15,"unpackedSize":398389,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvt2HXIUpZXlHbj6O+pnnCgK4h7TZrnAZwIJhF551iagIgOdmbKf9gLywh/HIDajntm9T6jMS3qfp1hze4JfZfhV4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib7C6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXkQ/+OS9kj+r5vq6ETZ3/3PiyeYk6BLARKWKI6+Pl9CYR/ypIc8yG\r\niF5U4+GI5tibYiwj9sGztpwLk+rATXCD01J8h2PTFQ13GLtJp+hTmiVJBcjc\r\nTYS8gcv0EhTZXtBMqrOLu9Eg5/m3gUTF4ikXR/L9lCU9wqNACmAEgkHevBcu\r\ndTvVkxu86RcA1Vf+h9sTDd+ad7Qyag0vz01i6CpL5HvfJocTH2EqR6mHhpRP\r\nxG3rLdQhOMUoy1osWJDrDBe4OM4ICmEVaM87B4y3Svdj680hUvw/Yr0UrZz7\r\nZrefwYzzb0K2BoHWnoPs3ebi/oaywYCw6b6Gc+LhyNocKytg4rizgJfrWlAb\r\nvtF6GyYWBPPvKFKsNElRUaIXOg8JkOjsJR9TqdGdwRAzWpr307KekeZNVLu/\r\nNfp4A0N6LMSyWnuSavtLwruicyOhEbP+u9zPQmYJ4cTFUPTvUR2kuVUHLtkE\r\n3ehWjcXCn7El2SgllVqmGGL1LSynw4vDBVeBE+8rY37U/qrhFLYfBDUO8LI0\r\nE08/QldUMO+2iIr+MikmGX6vXHmnq/R9s+BtzLlbr0Ryq6ndgn8qq8IpYpcN\r\nsUk6+a1AlV6zmZLD9RpiwC6eHJN8/Qy/AeUmZSg2YznyzXRo9HQdsG1wCjEO\r\nk2lp8O+vMdcaZQpVwmyfDrKp0dhH54rWsRk=\r\n=N57z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_3.0.0_1651486906301_0.12019202822743669"},"_hasShrinkwrap":false},"1.0.0-beta.16":{"name":"@asemirsk/table","version":"1.0.0-beta.16","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --version && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.15","@asemirsk/core":"^1.0.0-beta.16","@asemirsk/fclasses":"^1.0.0-beta.16","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"0ff46789373c0ccb710fa463d6cbd035aeb8eb1f","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-beta.16","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-qFuJz4+JdqRjqQzWYQwBT0MuEPmKIRrDnYFt7TkeKsfGJ1+ikg2SiSPPdWgr85dGYmx5rl46gLn6pgWy+JIesw==","shasum":"2d7295c88934362ab1a58edeb3347e85d6c5ffa6","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-beta.16.tgz","fileCount":15,"unpackedSize":398414,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV0QZM4cjWBOuzlmGDTaeZ0Y2wkjM9ckmd2kYKCmHA+AIgK90sqRdel3NtsWWJPlnNmiZ1F9LZ+T4EDRYABxzF5Js="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidOedACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVUw/+Paey3XaGFctntk4jSzG3Hg9Y7F9cMsHK2APlYeGlRdrOf5yE\r\nw3TZzre8YtFDmvMuGH5rC818Xu9qp8SZ/aDy55oynQuhjlrCIwexi5KWnZhA\r\nrDBFDFAEMGPkOJ++xmhYA9KwnmBxa70+FrEDaWjKXGMNMVkLuCMSCDjEeXoW\r\nUFSIq2yd6FQXmH33ZzFLwbHSEXoso8a1TBUbRGjtVsRzokhsYgq6MjSWoRj1\r\nIG7bGKzdUx/bY75FPLPN/etPBa4P/6+YrmJVEpFwLv5dEbh835NvmO3uQcYi\r\n+jmmc73f99slGXkUZAyOHdmivTkVoTCLTjd1crNlosdF2gy+eeY7JH/csrMx\r\n/KjxuEIG9TvfxAs3O80R4/d9e55ZyuB7A14PTCDH/9j6m0tjaeZeYRjJ8ylZ\r\n9eTZKHh4+oEFJwBtLirIHV8IdKoEa/iYzF5cNkAq+Id/I0mZU7n9Gs/pDnMI\r\nL82yK5jfVKra0OJ70S5bJ6hDi0nJIE3mRv0y7tncQ8P+RqjdSJXThs5REIWt\r\njfNWFJ0pYAUBV/zHskU7fOT+gbWHfVNO2UsNCkg3nToZRtwbmeAnPBakSiwn\r\nvjBKxxJBecOxIvV6jqF1UC63TbdRAfr3lAgvpACmdq5H4rotS75YyQgC3h8o\r\n2p+5x765HDNRITxEeeri5JWP+TaulbGCPHs=\r\n=DQKZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-beta.16_1651828636819_0.022253999190486207"},"_hasShrinkwrap":false},"1.0.0-canary-24-22.0":{"name":"@asemirsk/table","version":"1.0.0-canary-24-22.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-22.0+a48e91c","@asemirsk/fclasses":"1.0.0-canary-24-22.0+a48e91c","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"a48e91c77704024ccd08e24d4f85d1cd6971ccb1","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@bodiless/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-canary-24-22.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-N23KmXPBdM/wEEGjwToHfgrOQ9hpTRXHgj71+plDTY0l72RN/EtjLUL/ZJW9rANpGHNhKJpQ47ZBM7jYQlGvKg==","shasum":"8d68c8859686d9ea9d4c11f921cfa4fd77d074e9","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-canary-24-22.0.tgz","fileCount":15,"unpackedSize":398407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWx5kMrEnlZzyx8ImROtC4Z4KGga+Qhc74V1wnG7m3qQIgD6+xhGoNrGn4OjiWc44nMM6egXPBKWog2RFP1n5qops="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijezgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4lw/+Jf/+THSqCK/MkhgJHB0gRyzDN59o/4siBg0/KUMx/5KkGV4t\r\nqVsfFGhIC0373MXX1IhZrSVlQ7exV7jpHGIGwk0FWWYKDvzmnTXmZT55cqlI\r\nJGVVKAjl5e/r0dSiLXdHV1PJVfC5dizBIbu95ox6J6UYdWjuCXKwJ4uT6iHV\r\n7TFN4cPJFO8zoFccWTEBWwSvNkoiB20Zwc0GvPzMUOF+jS2dopS1KZ8frS46\r\nQhmt70PTTalO+jTK1fiCulOGt13vZeIYHHK9o3wiUgS/8GcUAvns+a43vGeE\r\ncWVltU/9eOEG19fQi+Bf6H2U6ikjnqiIaHf2nSDJqx2nmfyBFuVMi1HvFbqP\r\nGaUxZg0yJyoe35q4ghiHcTWnELWa2liOYUE9LpIt8EXpolmfAMubmaUU5bpO\r\nqutKbh5HXq5hgqq3uDP6+IWLEawf5eqVTk4DRx+ka1sB5XUeBoZJvI33taFO\r\nDt5ijvB+eX7MmSl4zh/XmI4dZUtWYMYgs8+sJPyDD1xIc0MkIZ1Yf45iR5Oa\r\nhasmay0UZwjrC4JDoz1A0xlx2+z1rAojHIYrm5JDD36tEmAGN5LM3s+dA5T5\r\nRnfS5c419GyyMswu5X4jcmn0jWR4PM5yD6AJbdliBMzVOsVy4HfLgjvKAPRL\r\ncF6tS8fAHeKK3YO+Em+HtC/s9CM9sTUBys8=\r\n=Jkyk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-canary-24-22.0_1653468384339_0.8358700258865608"},"_hasShrinkwrap":false},"1.0.0-canary-24-23.0":{"name":"@asemirsk/table","version":"1.0.0-canary-24-23.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-23.0+2cab1ea","@asemirsk/fclasses":"1.0.0-canary-24-23.0+2cab1ea","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"2cab1eaf4ac4d1a8ef3ef53ba3228ff16f7504eb","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@asemirsk/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@asemirsk/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@asemirsk/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-canary-24-23.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-x8OSHZDB2l/+Tvi40/CI38+ua6Ehmlirgv2VwEDymYEbdLjUS/m1693ieYF5yDBCZFaPuKtQ+IpKgXbwhRcprA==","shasum":"83d2317e1be64891c3ef3607e826ce7e78f71289","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-canary-24-23.0.tgz","fileCount":15,"unpackedSize":398407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPfpqnaFhYz6SMTVOIgoFIzrz/Sg2FpdHu7aaUsEdqhAiBw0lrsGQ9uQX8KciTmZynPVvM5lsXNBDTVzlB9St8nkA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijfHuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPFg//QE81eQhq6QWF1j3CfkKP1JVyjw1iRrD1/nwBlYuhG/ZbEqKk\r\nPSio80DaZCxUf9mf21n4G8xGv+Wyg2XsOvNPkwNsRRDuSS7pPSBptBXZqCal\r\nEcrMNi5EaFpQyHmZ79GI05I0pjuBrcJ8okFIWKpH4ptOAknwrgua5bFhDhkH\r\nLDjMNVRf6Tp5LvWq+NrH2JCAeMat0PW4VjgyzzHCinQlqWNICwgMLnD2+Cq9\r\n5JcyS67QOU9GBCS/qD06wfxiVbO7w7at8BwVYytPxgEQLKnx7xQPPMejeq3p\r\n5wHmLGvjCStHA81UHN90bXfBPnCH6S8mBsl6r27NQJfC0dGyId62rwfZJdq/\r\n4hZwwSyzRKFjH2poyKJfwU1wc/4tD2uFkWOFb5EGAoJcK927v8hOQKAyZVKb\r\nGCqmX12Rqnrrhq4Ez0obqSA8G6zJ2EJkVSiuFvNDatizEef/+wQc9/JEt/JP\r\nROYwfDBCbSPnjUfK/FZv6VFC/hVDnRGK6SARN8XsDJxN6D8jsSQL0X5ddjLt\r\n/8zSFXlkOlUtycLq7jqGXiE9brFmwutI/uVN8wnlbtUUA3UsNRLnao4pFyEk\r\nXeoqQRqJhhonE4wiSVdUbpdfRvPNOlk3AYPA5SYS157uPOpnuFJuRYBW34ez\r\n5NwoDfNOjkrozEJV3ZQY43if9fpJQHpreo4=\r\n=4p3J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-canary-24-23.0_1653469677875_0.9340224182442509"},"_hasShrinkwrap":false},"1.0.0-canary-24-24.0":{"name":"@asemirsk/table","version":"1.0.0-canary-24-24.0","description":"Provide a Bodiless table component and HOC to make it editable","author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-24.0+af2c8ac","@asemirsk/fclasses":"1.0.0-canary-24-24.0+af2c8ac","lodash":"^4.17.19","uuid":"^3.3.2"},"peerDependencies":{"react":"^17.0.2"},"devDependencies":{"@testing-library/react-hooks":"^5.0.3","@types/lodash":"^4.14.158","@types/uuid":"^3.4.4"},"gitHead":"af2c8ace172b3dc3a1f237c51eb55be1e21978bb","readme":"# Table Component\n\nThe Table Component provides a way to add tabular data to your site.\n\n## Content Editor Details\n\nThe Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.\n\n### Component Variations\n\nBy default, two variations of the Table Component are available to choose from:\n\n\n\n- **Table:** A table with a header row.\n- **Table Header First Column:** A table with a header row _and_ a header column.\n\n### Add a Table\n\nTo add a Table Component to your page:\n\n01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow\n Container](/Components/FlowContainer/), and, within its context menu, under \"Component,\" click\n **Add** (or **Swap**, if you're replacing a component).\n01. In the \"Insert Component\" modal, under \"Type,\" check the \"Table\" checkbox, and select the table\n variation you would like to add.\n - See details about the default table variations under [Component\n Variations](#component-variations).\n - Hover over the \"i\" icon for information about a particular table variation. \n \n\n### Edit and Format Table Text\n\nTo _edit_ the text within a Table Component, select the table cell you'd like to edit, and enter the\ndesired text.\n\nTo _format_ the text within a Table Component, highlight the text you'd like to format, and use the\n[Rich Text Editor](./Editors/RichText) formatting toolbar that pops up.\n\n\n\n?> **Note:** Bulk cell-selection (highlighting) is not possible; you can only highlight — and,\n therefore, _format_ — text within a single cell at a time.\n\n?> **Note:** For more information on the _Rich Text Editor_, please see: [Rich Text Editor\n Component](./Editors/RichText).\n\n### Add Columns and Rows\n\nYou can add columns and rows to a Table Component using the context menu. (You must be in [Edit\nMode](/ContentEditorUserGuide/#edit-mode).)\n\n\n\n- [Add a Column](#add-a-column)\n- [Add a Row](#add-a-row)\n- [Add a Header Row](#add-a-header-row)\n- [Add a Footer Row](#add-a-footer-row)\n\n#### Add a Column\n\nTo add a column to your table:\n\n01. Select the column to the left of where you would like to add a new column.\n01. From the context menu, under \"Column,\" click **Add**. \n  \n A new column will appear to the right of the column you selected.\n\n\n\n Note: To add a new column to the first column position:\n\n 01. **Add** a column to the second column position.\n 01. [**Move**](#move-columns-and-rows) the first column.\n\n
\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, you can only have one\nheader column. (This is unlike header _rows_, of which there can be multiple.)\n\n#### Add a Row\n\nTo add a body (i.e., non-header/non-footer) row to your table:\n\n01. Select the row above where you would like to add a new row.\n - **Note:** Selecting a _header_ or _footer_ row will not provide the correct context menu.\n - If you want to add a body row directly below a header row, see the note below.\n - If you want to add a body row directly below a footer row, you can't; only more footer\n rows can be added below a footer row.\n01. From the context menu, under \"Row,\" click **Add**. \n  \n A new row will appear below the row you selected.\n\n\n\n Note: To add a new body row directly below the header row(s):\n\n 01. **Add** a row below the topmost body row.\n 01. [**Move**](#move-columns-and-rows) the topmost body row.\n\n
\n\n#### Add a Header Row\n\nBoth of the default Table Component variants already have a header row, but you're able to add as\nmany as you require.\n\nHeader rows can only be positioned in the header (upper) region of a table — they cannot be _added_\nor _moved_ below it. Body rows and footer rows cannot be positioned above a header row.\n\nTo add a header row to your table:\n\n01. Select the header row above where you would like to add a new header row.\n01. From the context menu, under \"Header Row,\" click **Add**. \n  \n A new header row will appear below the header row you selected.\n\n\n\n Note: To add a new header row as the first (topmost) header row:\n\n 01. **Add** a header row below the current topmost header row.\n 01. [**Move**](#move-columns-and-rows) the topmost header row.\n\n
\n\n#### Add a Footer Row\n\nFooter rows are typically used for column summaries. Neither of the included Table Component\nvariants include a footer row by default, but you may add as many as you require.\n\nFooter rows can only be positioned in the footer (lower) region of a table — they cannot be _added_\nor _moved_ above it. Body rows and header rows cannot be positioned below a footer row.\n\nTo add a footer row to your table:\n\n- If your table doesn't have a footer row yet:\n 01. You may select anywhere on the table.\n 01. From the context menu, under \"Table,\" click **Footer** (designated with an \"add\" icon\n (**+**)). \n  \n A footer row will be added to the bottom of your table.\n- If your table already has one or more footer rows:\n 01. Select the footer row above where you would like to add a new footer row.\n 01. From the context menu, under \"Footer Row,\" click **Add**. \n  \n A new footer row will appear below the footer row you selected.\n\n\n\n Note: If there are already one or more footer rows in your table, and you need to\n add a new footer row as the first (topmost) footer row (i.e., directly below the bottommost\n body row):\n\n 01. **Add** a footer row below the current topmost footer row.\n 01. [**Move**](#move-columns-and-rows) the topmost footer row.\n\n
\n\nOut of the box, footer rows don't appear any different from body rows — and, depending on the\nstyling of your site, this may remain the case. If you need to discern whether a row is a body row\nor a footer row, simply select it, and, in its context menu, you will see either a \"Row\" section or\na \"Footer Row\" section, revealing the type of row that it is.\n\n### Delete Columns and Rows\n\nTo delete a column or row from your table:\n\n01. Select a table cell in the column or row that you would like to remove.\n01. From the context menu, under \"Column\" or \"Row,\" click **Delete**. \n  \n The selected column or row will be removed from your table.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you delete the header column, the\nsecond column will become the first column, and, thus, become the new header column.\n\n### Move Columns and Rows\n\nUsing the **Move** button in the context menu, columns and rows can be reordered.\n\nThe **Move** operation moves items in a single direction:\n\n- Columns are moved to the right.\n - I.e., a moved column will swap places with the column to its immediate right.\n- Rows are moved down.\n - I.e., a moved row will swap places with the row directly below it.\n\nTo move a column or row:\n\n01. Select a table cell in the column or row that you would like to reorder.\n01. From the context menu, under \"Column\" or \"Row,\" click **Move**. \n  \n The selected column or row will be moved to the right or down, respectively.\n - **Note:** A selected header or footer row will have the \"Row\" section in the context menu\n replaced with the according \"Header Row\" or \"Footer Row\" section.\n\n?> **Note:** If you're using the _Table Header First Column_ Table variant, the column in the first\n(leftmost) position is always styled as the header column. If you move the header column, the data\nfrom the first column will be swapped with that of the second, and the first column (which now\ncontains what was the second column's data) will continue to be styled as the header column.\n\n?> **Note:** A row can't be moved out of its respective region. \n
\nHeader, body, and footer rows are restricted to the upper, middle, and lower regions of the table,\nrespectively, and cannot be reordered out of those regions. \n(E.g., a header row can't be moved below a body row.)\n\n## Site Builder Details\n\n### Usage\n\n```js\nconst TableExample = asToken(\n withDesign({\n Header: addClasses('text-center'),\n }),\n asBodilessTable(),\n asDefaultTableStyle,\n)(CleanTable);\n```\n\nThe table is made editable via `asBodilessTable()`.\n\n```jsx\n\n```\n\n## Design Components\n\nThe Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be\nimplemented in the appropriate `token.tsx` file by adding the necessary Tailwind classes (see\n`asTableDefaultStyle` in\n[`examples/test-site/src/components/Table/index.tsx`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/examples/test-site/src/components/Table/index.tsx)). \nHere is an example demonstrating all possible design components:\n\n```js\nimport { withDesign, addClasses } from '@asemirsk/fclasses';\n\nconst asTableExampleStyle = withDesign({\n Wrapper: addClasses('p-3'),\n THead: addClasses('bg-gray-200'),\n TBody: addClasses('text-primary'),\n TFoot: addClasses('ml-2'),\n Row: addClasses('ml-2'),\n Cell: addClasses('border border-solid border-gray-200'),\n});\n```\n\nBecause each Cell knows where it is in the table, it is possible to use conditional styling. There\nare several helper functions for this; or you can provide a custom function with all Cell Props, as\nwell as table data.\n\n```js\nimport { withDesign, addClasses, addClassesIf, and, not } from '@asemirsk/fclasses';\nimport { useIsFirstColumn, useIsOddColumnn } from '@asemirsk/organisms';\n\nconst asTableExampleStyle = withDesign({\n Cell: asToken(\n /**\n * Here, we apply a dark column to alternating rows in the Body, left-align\n * text in the first column, and center-align text in the remaining columns.\n */\n addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),\n addClassesIf(useIsFirstColumn)('text-left'),\n addClassesIf(not(useIsFirstColumn))('text-center'),\n /**\n * Here, we use a custom function to style the penultimate column.\n */\n addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),\n ),\n});\n```\n\n?> **Note:** `useIsOddColumnn` is the name of the function, and is not a typo in the documentation.\n\n## Architectural Details\n\nThe Table Component will render as a typical HTML `` element.\n\nFor example, the following TSX—\n\n```tsx\nconst TableExample = asToken(\n asTableCenterText,\n)(StandardTable);\n\nexport default (props: any) => (\n \n \n { /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }\n \n \n \n);\n```\n\n—Will render an HTML `` element like the following (a number of details have been stripped\nfor demonstration purposes):\n\n```html\n\n ...\n \n \n | ... | \n ... | \n ... | \n
\n ...
\n ...
\n \n \n
\n```\n\nNote that header and footer rows are appropriately positioned within `` and ``\nelements, respectively.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/table@1.0.0-canary-24-24.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vTp4zkn50zhgzYF0SM1UAmaRM3+XN++a8dxS9odESi5l15KivquXmKFHWDJgGbOkN/AYsknWKTSrbgxwN+0Czw==","shasum":"a1fd278ee8c9ae41cb28761ac0404d23d02377a1","tarball":"https://registry.npmjs.org/@asemirsk/table/-/table-1.0.0-canary-24-24.0.tgz","fileCount":15,"unpackedSize":398407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaEa4zSJ5odFr6YoR+M3q9KMsMZW6uljkIuPEVU9nKKAiAlekuM4xOP3UPnDwvJUMGdCCUYg820Aes9jH1j817AFg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijfRCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7aw//aMlsmcSng+PICLN2hRRoma+VUM4p/MYUX1zcXqfzALXoA0lJ\r\n4+kevNlq7ZKZwAvcSpeURk7V7SK3WyzilwchGXAGV3aIupIzYOrgX8biZhHI\r\n+fFFfLkGqzUcC1IMbDAzrL9MWlOkyBr/BNZXONOLyh1DshQ4Lid6Z+d9A/FJ\r\n4jn2+OecbOqawREXw1U2wT09ZsfxsTzDxNPHLn2/hU5d0zkE3gmHRF2Y+WnT\r\nSwDTaIimnFWzM7+1ULRiUVDHMbNCPxJnyMm45aQysVFhz531ZQ5Dlmqt3CtV\r\nL8ro+C36gGXouoIvxeBye94MxYkYbGev6UrGWP2aHbu6q36py2In7UsXDACt\r\nnpwc2RaC0TWD6UU70TGxGTZcthRScj2PpINkZt+QEcd9AmFdBYmCqg5BP2r/\r\n5L1kZgyDxYGv9i/BmfBOY9DCnLIKaMARIKFiIGn+s+PKhy7XkQNs8v+dW81r\r\nGe9i8Kd9NRErrnEayzwOjhbZfDCqiPNi0aB0tRrD5sEcTQcgTFCr2NcQ54pT\r\nnpIhF9ePi9l9VQAGVo/U4umRM2p4e/mA/SgV+wvsiFY9WgDPG5holJfqWDve\r\nvRUmsPT9NRlbF6AcqLNQTWVfgM/sgGyfoiW4adpmZRw+XzTfjgRK4vpFdFXh\r\nhALNewAc84v09f/9ifkZv0RkDHgmMBHOlBw=\r\n=+pSY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/table_1.0.0-canary-24-24.0_1653470274032_0.05349010483418626"},"_hasShrinkwrap":false}},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"description":"Provide a Bodiless table component and HOC to make it editable","homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"author":{"name":"Erik Summerfield","email":"esummer3@its.jnj.com"},"bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}