documentation pass 5 (#887)

.storybook/preview.ts

@@ -6,7 +6,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Getting Started', ['Introduction', 'Installation', 'Basic Examples'], 'API', ['Columns', 'Properties'], 'Columns', 'Sorting', 'Selectable', 'Expandable', 'Pagination', 'Headers', 'Loading', '*', 'Performance', ['Optimization', '*'], 'Contributing'],
+      order: ['Getting Started', ['Introduction', 'Installation', 'Basic Examples', 'Kitchen Sink',  'Code of Conduct', 'Features & Issues', '*'], 'API', ['Columns', 'Properties'], 'Columns', 'Sorting', 'Selectable', 'Expandable', 'Pagination', 'Headers', 'Loading', '*', 'Performance', ['Optimization', '*'], 'Contributing'],
     },
   },
   a11y: {

README.md

@@ -1,21 +1,49 @@
-[![npm version](https://badge.fury.io/js/react-data-table-component.svg)](https://badge.fury.io/js/react-data-table-component) [![codecov](https://codecov.io/gh/jbetancur/react-data-table-component/branch/master/graph/badge.svg)](https://codecov.io/gh/jbetancur/react-data-table-component)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/26e0d16d-a986-46b1-9097-1a76c10d7cad/deploy-status)](https://app.netlify.com/sites/react-data-table-component/deploys) [![npm version](https://badge.fury.io/js/react-data-table-component.svg)](https://badge.fury.io/js/react-data-table-component) [![codecov](https://codecov.io/gh/jbetancur/react-data-table-component/branch/master/graph/badge.svg)](https://codecov.io/gh/jbetancur/react-data-table-component)
 
-## Documentation Website
+
+# React Data Table Component
+
+[![GitHub release](https://img.shields.io/github/release/jbetancur/react-data-table-component.svg)](https://GitHub.com/jbetancur/react-data-table-component/releases/)
+
+Creating yet another React table library came out of necessity while developing a web application for a growing startup. I discovered that while there are some great table libraries out there, some required heavy customization, were missing out of the box features such as built in sorting and pagination, or required understanding the atomic structure of html tables.
+
+If you want to achieve balance with the force and want a simple but flexible table library give React Data Table Component a chance. If you require an Excel clone, then this is not the React table library you are looking for 👋
+
+# Key Features
+
+- Declarative configuration
+- Built-in and configurable:
+  - Sorting
+  - Selectable Rows
+  - Expandable Rows
+  - Pagination
+- Themeable/Customizable
+- Accessibility
+- Responsive (via x-scroll/flex)
+
+# Documentation Website
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/26e0d16d-a986-46b1-9097-1a76c10d7cad/deploy-status)](https://app.netlify.com/sites/react-data-table-component/deploys)
 
-The documentation contains information about installation and usage.
+The documentation contains information about installation, usage and contributions.
 
 https://react-data-table-component.netlify.app
 
-## UI Library Integration
+# Supporting React Data Table Component
 
-React Data Table Component makes it easy to incorporate ui components from other libraries for overriding things like the sort icon, select checkbox.
+If you would like to support the project financially, visit
+[our campaign on OpenCollective](https://opencollective.com/react-data-table-component). Your contributions help accelerate the development of React Data Table Component!
 
-- [MaterialUI](https://codesandbox.io/s/react-data-table-materialui-72gdo)
-- [Bootstrap 4](https://codesandbox.io/s/react-data-table-sandbox-z6gtg)
+<a href="https://opencollective.com/react-data-table-component" target="_blank">
+	<img src="https://opencollective.com/react-data-table-component/contribute/button@2x.png?color=blue" width="250px" />
+</a>
 
 # Contributors
 
-Thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/jbetancur/react-data-table-component/graphs/contributors"><img src="https://opencollective.com/react-data-table-component/contributors.svg?width=890" /></a>
+<a href="https://github.com/jbetancur/react-data-table-component/graphs/contributors">
+	<img src="https://opencollective.com/react-data-table-component/contributors.svg?width=890" />
+</a>
+
+# Stargazers over time
+
+[![Stargazers over time](https://starchart.cc/jbetancur/react-data-table-component.svg)](https://starchart.cc/jbetancur/react-data-table-component)

src/DataTable/__tests__/DataTable.test.tsx

@@ -1940,7 +1940,7 @@ describe('DataTable::subHeader', () => {
 				columns={mock.columns}
 				subHeader
 				subHeaderComponent={<div />}
-				subHeaderAlign={Alignment.Left}
+				subHeaderAlign={Alignment.LEFT}
 			/>,
 		);
 
@@ -1955,7 +1955,7 @@ describe('DataTable::subHeader', () => {
 				columns={mock.columns}
 				subHeader
 				subHeaderComponent={<div />}
-				subHeaderAlign={Alignment.Center}
+				subHeaderAlign={Alignment.CENTER}
 			/>,
 		);
 
@@ -1970,7 +1970,7 @@ describe('DataTable::subHeader', () => {
 				columns={mock.columns}
 				subHeader
 				subHeaderComponent={<div />}
-				subHeaderAlign={Alignment.Right}
+				subHeaderAlign={Alignment.RIGHT}
 			/>,
 		);
 

src/DataTable/constants.ts

@@ -7,9 +7,9 @@ export enum Direction {
 }
 
 export enum Alignment {
-	Left = 'left',
-	Right = 'right',
-	Center = 'center',
+	LEFT = 'left',
+	RIGHT = 'right',
+	CENTER = 'center',
 }
 
 export enum Media {

src/DataTable/defaultProps.tsx

@@ -65,7 +65,7 @@ export const defaultProps = {
 	noTableHead: false,
 	noHeader: false,
 	subHeader: false,
-	subHeaderAlign: Alignment.Right,
+	subHeaderAlign: Alignment.RIGHT,
 	subHeaderWrap: true,
 	subHeaderComponent: null,
 	fixedHeader: false,

stories/DataTable/expandable/basic.mdx

@@ -0,0 +1,46 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Expandable Rows
+
+Adding Expandable Rows functionality is easy. Let's make our rows expandable:
+
+```js
+function MyComponent() {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      expandableRows
+    />
+  );
+};
+```
+
+## Custom Expander component
+Next, we'll need to create a custom component to display our data and pass it into `DataTable`:
+
+```js
+// data provides access to your row data
+const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
+
+function MyComponent() {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      expandableRows
+      expandableRowsComponent={ExpandedComponent}
+    />
+  );
+};
+```
+
+You'll notice that `expandableRowsComponent` has a function signtaure of `({ data }) => ...`. React Data Table handles passing your row `data` into your custom expandable component so you can access that rows fields.
+
+<Canvas>
+  <Story id="expandable-basic--basic" />
+</Canvas>
+
+## Accessibility
+
+You can tab through expanders and use the space bar or enter keys to expand.

stories/DataTable/Expandable.stories.js → stories/DataTable/expandable/basic.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import tableDataItems from '../constants/sampleMovieData';
-import DataTable from '../../src/index';
+import doc from './basic.mdx';
+import tableDataItems from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
 
 const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
 
@@ -15,12 +16,6 @@ const columns = [
 		selector: row => row.director,
 		sortable: true,
 	},
-	{
-		name: 'Genres',
-		selector: row => row.genres,
-		// eslint-disable-next-line react/no-array-index-key
-		cell: row => row.genres.map((genre, i) => <div key={i}>{genre}</div>),
-	},
 	{
 		name: 'Year',
 		selector: row => row.year,
@@ -56,4 +51,9 @@ Basic.args = {
 export default {
 	title: 'Expandable/Basic',
 	component: Basic,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/expandable/preDisabled.mdx

@@ -0,0 +1,25 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Pre Disabled Rows
+
+To pre-disable rows based on your data:
+
+```js
+...
+const rowPreDisabled = row => row.disabled;
+
+function MyComponent() {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+			expandableRows
+			expandableRowDisabled={rowPreDisabled}
+    />
+  );
+}
+```
+
+<Canvas>
+  <Story id="expandable-pre-disabled--pre-disabled" />
+</Canvas>

stories/DataTable/ExpandableRowDisabled.stories.js → stories/DataTable/expandable/preDisabled.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import tableDataItems from '../constants/sampleMovieData';
-import DataTable from '../../src/index';
+import doc from './preDisabled.mdx';
+import tableDataItems from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
 
 const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
 
@@ -15,12 +16,6 @@ const columns = [
 		selector: row => row.director,
 		sortable: true,
 	},
-	{
-		name: 'Genres',
-		selector: row => row.genres,
-		// eslint-disable-next-line react/no-array-index-key
-		cell: row => row.genres.map((genre, i) => <div key={i}>{genre}</div>),
-	},
 	{
 		name: 'Year',
 		selector: row => row.year,
@@ -52,4 +47,9 @@ export const PreDisabled = () => {
 export default {
 	title: 'Expandable/Pre Disabled ',
 	component: PreDisabled,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/expandable/preExpanded.mdx

@@ -0,0 +1,25 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Pre Selected Rows
+
+To pre-select rows based on your data:
+
+```js
+...
+const rowPreExpanded = row => row.defaultExpanded
+
+function MyComponent() {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+			expandableRows
+			expandableRowExpanded={rowPreExpanded}
+    />
+  );
+}
+```
+
+<Canvas>
+	<Story id="expandable-pre-expanded--pre-expanded" />
+</Canvas>

stories/DataTable/ExpandableRowDefaultExpanded.stories.js → stories/DataTable/expandable/preExpanded.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import tableDataItems from '../constants/sampleMovieData';
-import DataTable from '../../src/index';
+import doc from './preExpanded.mdx';
+import tableDataItems from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
 
 const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
 
@@ -15,21 +16,13 @@ const columns = [
 		selector: row => row.director,
 		sortable: true,
 	},
-	{
-		name: 'Genres',
-		selector: row => row.genres,
-		// eslint-disable-next-line react/no-array-index-key
-		cell: row => row.genres.map((genre, i) => <div key={i}>{genre}</div>),
-	},
 	{
 		name: 'Year',
 		selector: row => row.year,
 		sortable: true,
 	},
 ];
 
-const isExpanded = row => row.defaultExpanded;
-
 export const PreExpanded = () => {
 	const data = tableDataItems;
 	data[0].defaultExpanded = true;
@@ -40,7 +33,7 @@ export const PreExpanded = () => {
 			columns={columns}
 			data={data}
 			expandableRows
-			expandableRowExpanded={isExpanded}
+			expandableRowExpanded={row => row.defaultExpanded}
 			expandableRowsComponent={ExpandedComponent}
 			pagination
 		/>
@@ -50,4 +43,9 @@ export const PreExpanded = () => {
 export default {
 	title: 'Expandable/Pre Expanded ',
 	component: PreExpanded,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/material-ui/pagination.mdx

@@ -10,7 +10,7 @@ Using the `paginationComponent` property is you can access React Data Tables int
  ({ rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) => ...
  ```
 
-## Import and Create out Material UI Pagination Component
+## Import and Create our Material UI Pagination Component
 
 ```js
 import React from 'react';

stories/DataTable/selectableRows/basic.mdx

@@ -13,7 +13,6 @@ function MyComponent() {
 
   return (
     <DataTable
-      title="Movies"
       columns={columns}
       data={data}
       selectableRows
@@ -25,4 +24,8 @@ function MyComponent() {
 
 <Canvas>
   <Story id="selectable-basic--basic" />
-</Canvas>
+</Canvas>
+
+## Accessibility
+
+You can tab through checkboxes and use the space bar to expand.