update sortable table story to fix CustomHeader sorting (#500)

* update sortable table story to fix CustomHeader sorting

* update docs and onClick for sortableTable customHeader storybook

* Conor comments + remove .DS_Store add to gitignore

* version bump to 5.4.2

* Update docs

Co-authored-by: Conor Hawes <[email protected]>

.gitignore

@@ -8,6 +8,7 @@ npm-debug.log*
 node_modules
 yarn-error.log
 coverage
+.DS_Store
 
 # compiled storybook dir
 .storybook/static/storybook

docs.md

@@ -942,15 +942,16 @@ export default CoolPersonForm
 
 ## Textarea
 
-A textarea input that can be used in a `redux-forms`-controlled form. Can forward ref down to textarea input and optionally displays a character count.
+A textarea input that can be used in a `redux-forms`-controlled form.
+Can forward ref down to textarea input and optionally displays a character count.
 
 ### Parameters
 
 -   `input` **[Object][156]** A `redux-forms` [input][157] object
 -   `meta` **[Object][156]** A `redux-forms` [meta][158] object
 -   `maxLength` **[Number][153]?** The maximum allowed length of the input
 -   `hideCharacterCount` **[Boolean][151]** Whether to hide the character count if given a maxLength (optional, default `false`)
--   `forwardedRef` **[Ref][178]?** A ref to be forwarded to `textarea` input (standard `ref` cannot currently be forwarded)
+-   `forwardedRef` **Ref?** A ref to be forwarded to `textarea` input (standard `ref` cannot currently be forwarded)
 
 ### Examples
 
@@ -1418,8 +1419,8 @@ A component used to pass column information to a [Table][101] or [SortableTable]
 -   `label` **[String][149]?** The text that will be displayed in the column header. Defaults to `name`.
 -   `sortFunc` **[Function][150]?** The function that will be used to sort the table data when the column is selected
 -   `component` **[Function][150]?** A custom cell component for the column. Will be passed the `key`, `name`, `value` and `data` for the row.
--   `headerComponent` **[Function][150]?** A custom header component for the column. Will be passed the configuration of the column, as well as the current `sortPath` / `ascending` and an `onClick` handler.
--   `onClick` **[Function][150]?** A function that will be called `onClick` on every cell in the column
+-   `headerComponent` **[Function][150]?** A custom header component for the column. Will be passed the configuration of the column, as well as the current `sortPath` / `ascending` and an `onClick` handler. `onClick` must be appended to allow for sorting functionality.
+-   `onClick` **[Function][150]?** A function that will be called `onClick` on every cell in the column.
 -   `format` **[Function][150]?** A function that formats the value displayed in each cell in the column
 -   `disabled` **[Boolean][151]?** A flag that disables sorting for the column
 -   `placeholder` **[String][149]?** A string that will be displayed if the value of the cell is `undefined` or `null`
@@ -1439,6 +1440,14 @@ function PersonTable ({ people }) {
 }
 ```
 
+```javascript
+function CustomHeader({ column: { name }, onClick }) {
+  return (
+    <th onClick={onClick}>{name.toUpperCase() + '!'}</th>
+  )
+}
+```
+
 ## FlashMessage
 
 A component that displays a flash message.
@@ -2132,5 +2141,3 @@ function MyView () {
 [176]: https://github.com/reactjs/react-modal
 
 [177]: https://github.com/reactjs/react-modal/issues/25
-
-[178]: https://reactjs.org/docs/refs-and-the-dom.html

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },

src/tables/table-column.js

@@ -9,8 +9,8 @@ import { columnPropTypes } from './helpers'
  * @param {String} [label] - The text that will be displayed in the column header. Defaults to `name`.
  * @param {Function} [sortFunc] - The function that will be used to sort the table data when the column is selected
  * @param {Function} [component] - A custom cell component for the column. Will be passed the `key`, `name`, `value` and `data` for the row.
- * @param {Function} [headerComponent] - A custom header component for the column. Will be passed the configuration of the column, as well as the current `sortPath` / `ascending` and an `onClick` handler.
- * @param {Function} [onClick] - A function that will be called `onClick` on every cell in the column
+ * @param {Function} [headerComponent] - A custom header component for the column. Will be passed the configuration of the column, as well as the current `sortPath` / `ascending` and an `onClick` handler. `onClick` must be appended to allow for sorting functionality.
+ * @param {Function} [onClick] - A function that will be called `onClick` on every cell in the column. 
  * @param {Function} [format] - A function that formats the value displayed in each cell in the column
  * @param {Boolean} [disabled] - A flag that disables sorting for the column
  * @param {String} [placeholder] - A string that will be displayed if the value of the cell is `undefined` or `null`
@@ -26,8 +26,18 @@ import { columnPropTypes } from './helpers'
  *     </SortableTable>
  *   )
  * }
+ * 
+ *@example
+ * 
+ * function CustomHeader({ column: { name }, onClick }) {
+ *   return (
+ *     <th onClick={onClick}>{name.toUpperCase() + '!'}</th>
+ *   )
+ * }
+ * 
  */
 
+
 const propTypes = {
   ...columnPropTypes
 }

stories/tables/sortable-table.story.js

@@ -28,9 +28,9 @@ function CustomRow({ data: { active }, children }) {
 }
 
 // eslint-disable-next-line react/prop-types
-function CustomHeader({ column: { name } }) {
+function CustomHeader({ column: { name }, onClick }) {
   return (
-    <th>{name.toUpperCase() + '!'}</th>
+    <th onClick={onClick}>{name.toUpperCase() + '!'}</th>
   )
 }