@skyscanner/backpack-web 0.0.1

package/bpk-component-content-container/examples.js

@@ -0,0 +1,307 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import BpkContentContainer from './index';
+
+const DefaultExample = () => (
+  <div>
+    <BpkContentContainer bareHtml>
+      <h1>Heading Level 1</h1>
+      <h2>Heading Level 2</h2>
+      <h3>Heading Level 3</h3>
+      <h4>Heading Level 4</h4>
+      <h5>Heading Level 5</h5>
+      <h6>Heading Level 6</h6>
+      <h1>Heading Level 1</h1>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h2>Heading Level 2</h2>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h3>Heading Level 3</h3>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h4>Heading Level 4</h4>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h5>Heading Level 5</h5>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h6>Heading Level 6</h6>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <blockquote>
+        <p>
+          A paragraph (from the Greek paragraphos, &quot;to write beside&quot;
+          or &quot;written beside&quot;) is a self-contained unit of a discourse
+          in writing dealing with a particular point or idea. A paragraph
+          consists of one or more sentences. Though not required by the syntax
+          of any language, paragraphs are usually an expected part of formal
+          writing, used to organize longer prose.
+        </p>
+      </blockquote>
+      <ul>
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>Integer molestie lorem at massa</li>
+        <li>Facilisis in pretium nisl aliquet</li>
+        <li>
+          Nulla volutpat aliquam velit
+          <ul>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
+          </ul>
+        </li>
+        <li>Faucibus porta lacus fringilla vel</li>
+        <li>Aenean sit amet erat nunc</li>
+        <li>Eget porttitor lorem</li>
+        <li>
+          Nulla volutpat aliquam velit
+          <ol>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
+          </ol>
+        </li>
+      </ul>
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First name</th>
+            <th>Last name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Matthew</td>
+            <td>Davidson</td>
+            <td>@matthewdavidson</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>James</td>
+            <td>Ferguson</td>
+            <td>@jamesf</td>
+          </tr>
+        </tbody>
+      </table>
+      <code>npm install --save-dev bpk-component-content-container</code>
+      <br />
+      <pre>
+        <code>
+          {`
+import BpkContentContainer from 'bpk-component-content-container';
+export default () => (
+<BpkContentContainer>
+  <p>Hello<p>
+<BpkContentContainer>
+);
+          `}
+        </code>
+      </pre>
+    </BpkContentContainer>
+  </div>
+);
+
+const Alternate = () => (
+  <div>
+    <BpkContentContainer bareHtml alternate>
+      <h1>Heading Level 1</h1>
+      <h2>Heading Level 2</h2>
+      <h3>Heading Level 3</h3>
+      <h4>Heading Level 4</h4>
+      <h5>Heading Level 5</h5>
+      <h6>Heading Level 6</h6>
+      <h1>Heading Level 1</h1>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h2>Heading Level 2</h2>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h3>Heading Level 3</h3>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h4>Heading Level 4</h4>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h5>Heading Level 5</h5>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <h6>Heading Level 6</h6>
+      <p>
+        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
+        &quot;written beside&quot;) is a self-contained unit of a discourse in
+        writing dealing with a particular point or idea. A paragraph consists of
+        one or more sentences. Though not required by the syntax of any
+        language, paragraphs are usually an expected part of formal writing,
+        used to organize longer prose.
+      </p>
+      <blockquote>
+        <p>
+          A paragraph (from the Greek paragraphos, &quot;to write beside&quot;
+          or &quot;written beside&quot;) is a self-contained unit of a discourse
+          in writing dealing with a particular point or idea. A paragraph
+          consists of one or more sentences. Though not required by the syntax
+          of any language, paragraphs are usually an expected part of formal
+          writing, used to organize longer prose.
+        </p>
+      </blockquote>
+      <ul>
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>Integer molestie lorem at massa</li>
+        <li>Facilisis in pretium nisl aliquet</li>
+        <li>
+          Nulla volutpat aliquam velit
+          <ul>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
+          </ul>
+        </li>
+        <li>Faucibus porta lacus fringilla vel</li>
+        <li>Aenean sit amet erat nunc</li>
+        <li>Eget porttitor lorem</li>
+        <li>
+          Nulla volutpat aliquam velit
+          <ol>
+            <li>Phasellus iaculis neque</li>
+            <li>Purus sodales ultricies</li>
+            <li>Vestibulum laoreet porttitor sem</li>
+            <li>Ac tristique libero volutpat at</li>
+          </ol>
+        </li>
+      </ul>
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First name</th>
+            <th>Last name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Matthew</td>
+            <td>Davidson</td>
+            <td>@matthewdavidson</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>James</td>
+            <td>Ferguson</td>
+            <td>@jamesf</td>
+          </tr>
+        </tbody>
+      </table>
+      <code>npm install --save-dev bpk-component-content-container</code>
+      <br />
+      <pre>
+        <code>
+          {`
+import BpkContentContainer from 'bpk-component-content-container';
+export default () => (
+<BpkContentContainer>
+  <p>Hello<p>
+<BpkContentContainer>
+);
+          `}
+        </code>
+      </pre>
+    </BpkContentContainer>
+  </div>
+);
+
+export { DefaultExample, Alternate };

package/bpk-component-content-container/index.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import component from './src/BpkContentContainer';
+
+export default component;

package/bpk-component-content-container/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-content-container",
+  "version": "4.1.0",
+  "description": "Backpack content container component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-content-container/src/BpkContentContainer.js

@@ -0,0 +1,84 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkContentContainer.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkContentContainer = (props) => {
+  const {
+    alternate,
+    bareHtml,
+    children,
+    className,
+    dangerouslySetInnerHTML,
+    tagName: TagName,
+    ...rest
+  } = props;
+  const classNames = [getClassName('bpk-content-container')];
+
+  if (bareHtml) {
+    classNames.push(getClassName('bpk-content-container--bare-html'));
+
+    if (alternate) {
+      classNames.push(
+        getClassName('bpk-content-container--bare-html-alternate'),
+      );
+    }
+  }
+
+  if (className) {
+    classNames.push(className);
+  }
+
+  return (
+    <TagName
+      className={classNames.join(' ')}
+      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+      {...rest}
+    >
+      {children}
+    </TagName>
+  );
+};
+
+BpkContentContainer.propTypes = {
+  children: PropTypes.node,
+  dangerouslySetInnerHTML: PropTypes.shape({
+    __html: PropTypes.string.isRequired,
+  }),
+  tagName: PropTypes.oneOf(['article', 'aside', 'div', 'main', 'section']),
+  bareHtml: PropTypes.bool,
+  alternate: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+BpkContentContainer.defaultProps = {
+  children: null,
+  dangerouslySetInnerHTML: null,
+  tagName: 'div',
+  bareHtml: false,
+  alternate: false,
+  className: null,
+};
+
+export default BpkContentContainer;

package/bpk-component-content-container/src/BpkContentContainer.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-container>h1:not(:first-child),.bpk-content-container>h2:not(:first-child),.bpk-content-container>h3:not(:first-child),.bpk-content-container>h4:not(:first-child){margin-top:1.875rem}.bpk-content-container>.bpk-content-container{margin-bottom:.75rem}.bpk-content-container>*:last-child{margin-bottom:0}.bpk-content-container--bare-html h1{margin-top:0;margin-bottom:.75rem;font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}@media (max-width: 32.25rem){.bpk-content-container--bare-html h1{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-content-container--bare-html h2{margin-top:0;margin-bottom:.75rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-content-container--bare-html h2{font-size:1.5rem;line-height:2rem;font-weight:400}}.bpk-content-container--bare-html h3{margin-top:0;margin-bottom:.75rem;font-size:1.5rem;line-height:2rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h3{font-size:1rem;line-height:1.5rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h4{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h4{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h5{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h5{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h6{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h6{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html a{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-link-color, #0770e3)}.bpk-no-touch-support .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}.bpk-content-container--bare-html a:visited{color:#0770e3;color:var(--bpk-link-visited-color, #0770e3)}.bpk-content-container--bare-html a:active{text-decoration:underline;color:#042759;color:var(--bpk-link-active-color, #042759)}.bpk-content-container--bare-html p{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-container--bare-html ul,.bpk-content-container--bare-html ol{margin-top:0;margin-bottom:.75rem;padding-left:1.5rem}.bpk-content-container--bare-html ul ul,.bpk-content-container--bare-html ul ol,.bpk-content-container--bare-html ol ul,.bpk-content-container--bare-html ol ol{margin-top:0;margin-bottom:0}.bpk-content-container--bare-html ul li,.bpk-content-container--bare-html ol li{margin-top:0;margin-bottom:0}.bpk-content-container--bare-html table{width:100%;margin-bottom:0.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #dddde5 }.bpk-content-container--bare-html table td{padding:1rem}.bpk-content-container--bare-html table th{padding:1rem;background-color:#f1f2f8;font-weight:normal;text-align:left}html[dir='rtl'] .bpk-content-container--bare-html table th{text-align:right}.bpk-content-container--bare-html code{display:inline;padding:0 .375rem;background-color:#f1f2f8;color:#444560;text-align:left;text-shadow:0 .0625rem #fff;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir='rtl'] .bpk-content-container--bare-html code{direction:ltr}.bpk-content-container--bare-html pre{margin:0 0 .75rem;padding:1.5rem;background-color:#f1f2f8;border-radius:.25rem}.bpk-content-container--bare-html pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html blockquote{margin:0 0 1rem 0;padding:1.5rem;background-color:#f1f2f8;color:#68697f;box-shadow:2px 0 0 0 #0770e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}html[dir='rtl'] .bpk-content-container--bare-html blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0770e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}.bpk-content-container--bare-html blockquote>*:last-child{margin-bottom:0}.bpk-content-container--bare-html-alternate code{background-color:#cddff8;text-shadow:none}.bpk-content-container--bare-html-alternate pre{background-color:transparent;box-shadow:0 0 0 1px #b2b2bf inset}.bpk-content-container--bare-html-alternate pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html-alternate pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html-alternate table{box-shadow:0 0 0 1px #b2b2bf }.bpk-content-container--bare-html-alternate table th{background-color:#fff;text-align:left;font-weight:700}html[dir='rtl'] .bpk-content-container--bare-html-alternate table th{text-align:right}

package/bpk-component-content-container/src/BpkContentContainer.module.scss

@@ -0,0 +1,41 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+
+.bpk-content-container {
+  > {
+    @include bpk-content-container;
+
+    .bpk-content-container {
+      margin-bottom: $bpk-spacing-sm;
+    }
+
+    *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &--bare-html {
+    @include bpk-content-container--bare-html;
+  }
+
+  &--bare-html-alternate {
+    @include bpk-content-container--bare-html-alternate;
+  }
+}

package/bpk-component-datatable/README.md

@@ -0,0 +1,141 @@
+# bpk-component-datatable
+
+> Backpack datatable component.
+
+## Installation
+
+```sh
+npm install bpk-component-datatable --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+
+const rows = [
+  { name: 'Jose', description: 'Software Engineer' },
+  { name: 'Rolf', description: 'Manager' }
+]
+
+const onRowClick = row => alert(JSON.stringify(row));
+
+export default () => (
+  <BpkDataTable rows={rows} height={200} onRowClick={onRowClick}>
+    <BpkDataTableColumn
+      label={'Name'}
+      dataKey={'name'}
+      width={100}
+    />
+    <BpkDataTableColumn
+      label={'Description'}
+      dataKey={'description'}
+      width={100}
+      flexGrow={1}
+    />
+  </BpkDataTable>
+);
+```
+
+By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection` and they will be handled as explained in react-virtualized's [docs] (https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md#prop-types)
+
+```js
+import React from 'react';
+import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+import _sortBy from 'lodash/sortBy';
+
+const complexRows = [
+    {
+      name: 'Jose',
+      description: 'Software Engineer',
+      seat: { office: 'London', desk: 10 },
+    },
+    {
+      name: 'Rolf',
+      description: 'Manager',
+      seat: { office: 'Barcelona', desk: 12 },
+    },
+    {
+      name: 'John',
+      description: 'Software Engineer',
+      seat: { office: 'Barcelona', desk: 15 },
+    },
+];
+
+let sortByValue = 'seat';
+let sortDirectionValue = 'DESC';
+const sortFunction = ({ sortBy, sortDirection }) => {
+  if (sortBy === 'seat') {
+    complexRows = _sortBy(complexRows, [
+      row => row.seat.office,
+      row => row.seat.desk,
+    ]);
+  } else {
+    complexRows = _sortBy(complexRows, sortBy);
+  }
+  if (sortDirection === 'DESC') {
+    complexRows.reverse();
+  }
+  sortByValue = sortBy;
+  sortDirectionValue = sortDirection;
+};
+
+export default () => (
+  <BpkDataTable
+    rows={complexRows}
+    height={200}
+    sort={sortFunction}
+    sortBy={sortByValue}
+    sortDirection={sortDirectionValue}
+  >
+    <BpkDataTableColumn
+      label="Name"
+      dataKey="name"
+      width={100}
+    />
+    <BpkDataTableColumn
+      label="Description"
+      dataKey="description"
+      width={100}
+    />
+    <BpkDataTableColumn
+      label="Seat"
+      dataKey="seat"
+      width={100}
+      flexGrow={1}
+      cellRenderer={({ cellData }) => (
+        <React.Fragment>
+          {cellData.office} - {cellData.desk}
+        </React.Fragment>
+      )}
+    />
+  </BpkDataTable>
+);
+```
+
+## Props
+
+### BpkDataTable
+
+Supports all properties defined in [`Table`](https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md) (from `react-virtualized`),
+in addition to the following:
+
+
+| Property               | PropType                    | Required | Default Value        |
+| ---------------------- | --------------------------- | -------- | -------------------- |
+| rows                   | arrayOf(Object)             | true     | -                    |
+| children               | arrayOf(BpkDataTableColumn) | true     | -                    |
+| height                 | number                      | true     | -                    |
+| width                  | number                      | false    | full width of parent |
+| headerHeight           | number                      | false    | 60                   |
+| rowHeight              | number                      | false    | 60                   |
+| defaultColumnSortIndex | number                      | false    | 0                    |
+| sort                   | func                        | false    | null                 |
+| sortBy                 | string                      | false    | null                 |
+| sortDirection          | oneOf('ASC', 'DESC')        | false    | null                 |
+
+
+### BpkDataTableColumn
+
+Supports all properties defined in [`Column`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md) (from `react-virtualized`)