documenation pass 7 (#892)

Author: jbetancur

.storybook/preview.ts

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

README.md

@@ -1,5 +1,4 @@
-[![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)
-
+[![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) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
 # React Data Table Component
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-data-table-component",
-  "version": "7.0.0-rc7",
-  "description": "A declarative react based data table",
+  "version": "7.0.0",
+  "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.cjs.js",
@@ -42,24 +42,24 @@
   "devDependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/theming": "^6.3.7",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "@testing-library/react": "^12.0.0",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/lodash.orderby": "^4.6.6",
-    "@types/node": "^16.7.2",
-    "@types/react": "^17.0.19",
+    "@types/node": "^16.7.10",
+    "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
-    "@types/styled-components": "^5.1.13",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "axios": "^0.21.1",
+    "@types/styled-components": "^5.1.14",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "axios": "^0.21.3",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.8.3",
     "eslint": "^7.32.0",
@@ -68,12 +68,12 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
     "gh-pages": "^3.2.3",
-    "jest": "^27.0.6",
+    "jest": "^27.1.0",
     "jest-styled-components": "^7.0.5",
     "jest-watch-typeahead": "^0.6.4",
     "lodash-es": "^4.17.21",
@@ -96,14 +96,14 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.3.5"
+		"typescript": "^4.4.2"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
     "lodash.orderby": "^4.6.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "react": ">= 16.8.3",
+    "styled-components": ">= 4"
   }
 }

src/DataTable/TableColCheckbox.tsx

@@ -40,7 +40,7 @@ function TableColCheckbox<T>({
 	const indeterminate = selectedRows.length > 0 && !allSelected;
 	const rows = selectableRowDisabled ? rowData.filter((row: T) => !selectableRowDisabled(row)) : rowData;
 	const isDisabled = rows.length === 0;
-	// The row count should subtrtact rows that are disabled
+	// The row count should subtract rows that are disabled
 	const rowCount = Math.min(rowData.length, rows.length);
 
 	const handleSelectAll = () => {

stories/DataTable/ThemeDark.stories.js

@@ -39,20 +39,20 @@ const Template = args => <BuiltinStory {...args} />;
 export const Builtin = Template.bind({});
 
 Builtin.args = {
-	theme: 'light',
+	theme: 'default',
 };
 
 export default {
 	title: 'Theming/Builtin',
 	component: Builtin,
 	argTypes: {
 		theme: {
-			options: ['light', 'dark'],
+			options: ['default', 'dark'],
 			control: { type: 'radio' },
 			description: 'toggle between light and dark themes',
 			table: {
 				type: { summary: 'string' },
-				defaultValue: { summary: 'Hello' },
+				defaultValue: { summary: 'default' },
 			},
 		},
 	},

stories/DataTable/pagination/basic.mdx

@@ -0,0 +1,22 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Pagination
+
+Adding client side pagination functionality is easy:
+
+```js
+function MyComponent() {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      pagination
+    />
+  );
+};
+```
+
+<Canvas>
+  <Story id="pagination-basic--basic" />
+</Canvas>
+

stories/DataTable/Pagination.stories.js renamed to stories/DataTable/pagination/basic.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import data from '../constants/sampleMovieData';
-import DataTable from '../../src/index';
+import doc from './basic.mdx';
+import data from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
 
 const columns = [
 	{
@@ -25,4 +26,9 @@ export const Basic = () => <DataTable title="Movie List" columns={columns} data=
 export default {
 	title: 'Pagination/Basic',
 	component: Basic,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/pagination/options.mdx

@@ -0,0 +1,34 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Pagination Component Options
+
+`paginationComponentOptions`allow you to provide options to the built-in in Pagination component.
+
+| Property              | Type    | Description                                           |
+| --------------------- | ------- | ----------------------------------------------------- |
+| noRowsPerPage         | boolean | hide the rows per page dropdown                       |
+| rowsPerPageText       | string  | chan ge the page per fors text                        |
+| rangeSeparatorText    | string  | change the seperator text e.g. 1 - 10 'of' 100 rows   |
+| selectAllRowsItem     | boolean | show 'All' as an option in the rows per page dropdown |
+| selectAllRowsItemText | string  | change the rows per page text                         |
+
+```js
+const paginationComponentOptions = {
+	rowsPerPageText: 'Filas por página',
+	rangeSeparatorText: 'de',
+	selectAllRowsItem: true,
+	selectAllRowsItemText: 'Todos',
+};
+
+function MyComponent() {
+	return <DataTable columns={columns} data={data} pagination paginationComponentOptions={paginationComponentOptions} />;
+}
+```
+
+## Custom Pagination Component `paginationComponentOptions`
+
+When using `paginationComponent` the `paginationComponentOptions` above become irrelevent. Instead, `paginationComponentOptions` can be used to pass whatever options you need to your custom Pagination component
+
+<Canvas>
+	<Story id="pagination-options--options" />
+</Canvas>

stories/DataTable/PaginationOptions.stories.js renamed to stories/DataTable/pagination/options.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import data from '../constants/sampleMovieData';
-import DataTable from '../../src/index';
+import doc from './options.mdx';
+import data from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
 
 const columns = [
 	{
@@ -20,7 +21,7 @@ const columns = [
 	},
 ];
 
-const paginationOptions = {
+const paginationComponentOptions = {
 	rowsPerPageText: 'Filas por página',
 	rangeSeparatorText: 'de',
 	selectAllRowsItem: true,
@@ -33,11 +34,16 @@ export const Options = () => (
 		columns={columns}
 		data={data}
 		pagination
-		paginationComponentOptions={paginationOptions}
+		paginationComponentOptions={paginationComponentOptions}
 	/>
 );
 
 export default {
 	title: 'Pagination/Options',
 	component: Options,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/pagination/remote.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Remote Pagination
+
+To enable remote/manual pagination you'll need to add the `paginationServer` property and ensure the remote API you are using supports pagination metadata.
+
+You'll also need to implement the `onChangeRowsPerPage`, and `onChangePage` callbacks.
+
+Finally, you'll need to keep track of your total rows using `paginationTotalRows`. This should be obtained from the remote API you are calling from to get the pagnination records.
+
+The following example covers a working example of remote pagniation:
+
+<Canvas>
+	<Story id="pagination-remote--remote" />
+</Canvas>

stories/DataTable/PaginationRemote.stories.js renamed to stories/DataTable/pagination/remote.stories.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import doc from './remote.mdx';
 import axios from 'axios';
-import DataTable from '../../src/index';
+import DataTable from '../../../src/index';
 
 const columns = [
 	{
@@ -20,7 +21,7 @@ const columns = [
 	},
 ];
 
-export const Remote = () => {
+export function Remote() {
 	const [data, setData] = useState([]);
 	const [loading, setLoading] = useState(false);
 	const [totalRows, setTotalRows] = useState(0);
@@ -51,7 +52,7 @@ export const Remote = () => {
 	};
 
 	useEffect(() => {
-		fetchUsers(1);
+		fetchUsers(1); // fetch page 1 of users
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -64,14 +65,18 @@ export const Remote = () => {
 			pagination
 			paginationServer
 			paginationTotalRows={totalRows}
-			selectableRows
 			onChangeRowsPerPage={handlePerRowsChange}
 			onChangePage={handlePageChange}
 		/>
 	);
-};
+}
 
 export default {
 	title: 'Pagination/Remote',
 	component: Remote,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
 };

stories/DataTable/sorting/sortFunctionCol.mdx

@@ -0,0 +1,32 @@
+import { Story, Canvas } from '@storybook/addon-docs';
+
+# Custom Sorting Individual Columns - sortFunction
+
+If you only need to override the sorting behavior for a specific column(s). In this case, the custom sorting function takes only provides you access to two arguments, rowA and rowB.
+
+```js
+const customColumnSort = (rowA, rowB) => {
+  if (rowA.columnName > rowB.columnName) {
+   return 1;
+  } else if (rowB.columnName > rowA.columnName) {
+   return -1;
+  }
+  return 0;
+};
+
+const columns = [
+  {
+    name: 'Quantity',
+    selector: 'quantity',
+    sortable: true,
+    sortFunction: customColumnSort
+  }
+];
+
+...
+<DataTable ... columns={columns} />
+```
+
+<Canvas>
+	<Story id="sorting-custom-column-sort--custom-column-sort" />
+</Canvas>

stories/DataTable/sorting/sortFunctionCol.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import doc from './sortFunctionCol.mdx';
+import data from '../../constants/sampleMovieData';
+import DataTable from '../../../src/index';
+
+const caseInsensitiveSort = (rowA, rowB) => {
+	const a = rowA.title.toLowerCase();
+	const b = rowB.title.toLowerCase();
+
+	if (a > b) {
+		return 1;
+	} else if (b > a) {
+		return -1;
+	}
+	return 0;
+};
+
+const columns = [
+	{
+		name: 'Title',
+		selector: row => row.title,
+		sortable: true,
+		sortFunction: caseInsensitiveSort,
+	},
+	{
+		name: 'Director',
+		selector: row => row.director,
+		sortable: true,
+	},
+	{
+		name: 'Year',
+		selector: row => row.year,
+		sortable: true,
+	},
+];
+
+export const CustomColumnSort = () => {
+	return <DataTable title="Movie List" columns={columns} data={data} pagination />;
+};
+
+export default {
+	title: 'Sorting/Custom Column Sort',
+	component: CustomColumnSort,
+	parameters: {
+		docs: {
+			page: doc,
+		},
+	},
+};

stories/columns.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="API/Columns" id="api-columns" />
+<Meta title="API Reference/Columns" id="api-columns" />
 
 # Column Definitions API