@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

package/bpk-component-datatable/src/BpkDataTable.js

@@ -1,177 +1,170 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactVirtualized = require("react-virtualized");
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
-var _BpkDataTableModule = _interopRequireDefault(require("./BpkDataTable.css"));
-
-var _BpkDataTableColumn = _interopRequireDefault(require("./BpkDataTableColumn"));
-
-var _hasChildrenOfType = _interopRequireDefault(require("./hasChildrenOfType"));
-
-var _sorter = _interopRequireDefault(require("./sorter"));
-
-const _excluded = ["children", "className", "headerClassName", "rowClassName", "sort"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDataTableModule.default);
+/*
+ * 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.
+ */
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Table, AutoSizer } from 'react-virtualized';
+import _omit from 'lodash/omit';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkDataTable.module.scss';
+import BpkDataTableColumn from './BpkDataTableColumn';
+import hasChildrenOfType from './hasChildrenOfType';
+import makeSorter, { type Sorter } from './sorter';
+import type { Props } from './common-types';
+
+const getClassName = cssModules(STYLES);
 const omittedTableProps = ['rowGetter', 'rowCount', 'onHeaderClick'];
 
-class BpkDataTable extends _react.Component {
-  constructor(props) {
+type State<Row> = {
+  sorter: Sorter<Row>,
+  rowSelected: ?number,
+};
+
+class BpkDataTable<Row> extends Component<Props<Row>, State<Row>> {
+  static defaultProps = {
+    ...Table.defaultProps,
+    width: null,
+    headerHeight: 60,
+    rowHeight: 60,
+    gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
+    defaultColumnSortIndex: 0,
+    sort: null,
+    sortBy: null,
+    sortDirection: null,
+  };
+
+  constructor(props: Props<Row>) {
     super();
 
-    _defineProperty(this, "onRowClicked", ({
-      index
-    }) => {
-      if (this.state.rowSelected === index) {
-        this.setState({
-          rowSelected: undefined
-        });
-      } else {
-        this.setState({
-          rowSelected: index
-        });
-      }
-
-      if (this.props.onRowClick !== undefined) {
-        this.props.onRowClick(this.state.sorter.getRow(index));
-      }
-    });
-
-    _defineProperty(this, "onHeaderClick", ({
-      dataKey: sortBy,
-      event
-    }) => {
-      const column = _react.default.Children.toArray(this.props.children).find(child => child.props.dataKey === sortBy);
-
-      if (!column) {
-        return;
-      }
-
-      if (column.props.disableSort === true) {
-        return;
-      } // See: https://reactjs.org/docs/legacy-event-pooling.html
-
-
-      const eventTarget = event.target;
-
-      if (eventTarget instanceof Element) {
-        this.setState(prevState => ({
-          sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column)
-        }));
-      }
-    });
-
-    _defineProperty(this, "rowClassName", (consumerClassName, {
-      index
-    }) => {
-      const classNames = [getClassName('bpk-data-table__row')];
-
-      if (this.state.rowSelected === index) {
-        classNames.push(getClassName('bpk-data-table__row--selected'));
-      }
-
-      if (this.props.onRowClick !== undefined) {
-        classNames.push(getClassName('bpk-data-table__row--clickable'));
-      }
-
-      if (index === -1) {
-        classNames.push(getClassName('bpk-data-table__header-row'));
-      }
-
-      if (consumerClassName) {
-        if (typeof consumerClassName === 'function') {
-          classNames.push(consumerClassName({
-            index
-          }));
-        } else {
-          classNames.push(consumerClassName);
-        }
-      }
-
-      return classNames;
-    });
-
     this.state = {
-      sorter: (0, _sorter.default)(props),
-      rowSelected: undefined
+      sorter: makeSorter(props),
+      rowSelected: undefined,
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props<Row>) {
     if (nextProps.rows !== this.props.rows) {
       this.state.sorter.propsChange(nextProps);
     }
   }
 
-  renderTable(width) {
-    const _this$props = this.props,
-          {
+  onRowClicked = ({ index }: { index: number }) => {
+    if (this.state.rowSelected === index) {
+      this.setState({ rowSelected: undefined });
+    } else {
+      this.setState({ rowSelected: index });
+    }
+    if (this.props.onRowClick !== undefined) {
+      this.props.onRowClick(this.state.sorter.getRow(index));
+    }
+  };
+
+  onHeaderClick = ({
+    dataKey: sortBy,
+    event,
+  }: {
+    dataKey: string,
+    event: SyntheticEvent<HTMLDivElement>,
+  }) => {
+    const column = React.Children.toArray(this.props.children).find(
+      (child) => child.props.dataKey === sortBy,
+    );
+
+    if (!column) {
+      return;
+    }
+
+    if (column.props.disableSort === true) {
+      return;
+    }
+
+    // See: https://reactjs.org/docs/legacy-event-pooling.html
+    const eventTarget = event.target;
+    if (eventTarget instanceof Element) {
+      this.setState((prevState) => ({
+        sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column),
+      }));
+    }
+  };
+
+  rowClassName = (
+    consumerClassName: ?string | ?(({ index: number }) => string),
+    { index }: { index: number },
+  ) => {
+    const classNames = [getClassName('bpk-data-table__row')];
+    if (this.state.rowSelected === index) {
+      classNames.push(getClassName('bpk-data-table__row--selected'));
+    }
+    if (this.props.onRowClick !== undefined) {
+      classNames.push(getClassName('bpk-data-table__row--clickable'));
+    }
+    if (index === -1) {
+      classNames.push(getClassName('bpk-data-table__header-row'));
+    }
+    if (consumerClassName) {
+      if (typeof consumerClassName === 'function') {
+        classNames.push(consumerClassName({ index }));
+      } else {
+        classNames.push(consumerClassName);
+      }
+    }
+    return classNames;
+  };
+
+  renderTable(width: ?number) {
+    const {
       children,
       className,
       headerClassName,
       rowClassName,
-      sort
-    } = _this$props,
-          restOfProps = _objectWithoutProperties(_this$props, _excluded);
+      sort,
+      ...restOfProps
+    } = this.props;
 
     const classNames = [getClassName('bpk-data-table')];
-
     if (className) {
       classNames.push(className);
     }
 
     const headerClassNames = [getClassName('bpk-data-table__header-column')];
-
     if (headerClassName) {
       headerClassNames.push(headerClassName);
     }
 
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact]
-      _react.default.createElement(_reactVirtualized.Table, _extends({}, restOfProps, {
-        className: classNames.join(' '),
-        width: width,
-        rowCount: this.state.sorter.rowCount,
-        rowGetter: ({
-          index
-        }) => this.state.sorter.getRow(index),
-        headerClassName: headerClassNames.join(' '),
-        rowClassName: row => this.rowClassName(rowClassName, row),
-        onRowClick: this.onRowClicked,
-        onHeaderClick: this.onHeaderClick
-      }, this.state.sorter.sortProps), _react.default.Children.map(children, _BpkDataTableColumn.default.toColumn))
+      <Table
+        {...restOfProps}
+        className={classNames.join(' ')}
+        width={width}
+        rowCount={this.state.sorter.rowCount}
+        rowGetter={({ index }) => this.state.sorter.getRow(index)}
+        headerClassName={headerClassNames.join(' ')}
+        rowClassName={(row) => this.rowClassName(rowClassName, row)}
+        onRowClick={this.onRowClicked}
+        onHeaderClick={this.onHeaderClick}
+        {...this.state.sorter.sortProps}
+      >
+        {React.Children.map(children, BpkDataTableColumn.toColumn)}
+      </Table>
     );
   }
 
@@ -180,39 +173,25 @@ class BpkDataTable extends _react.Component {
       return this.renderTable(this.props.width);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_reactVirtualized.AutoSizer, {
-      disableHeight: true
-    }, ({
-      width
-    }) => this.renderTable(width));
+    return (
+      <AutoSizer disableHeight>
+        {({ width }) => this.renderTable(width)}
+      </AutoSizer>
+    );
   }
-
 }
 
-_defineProperty(BpkDataTable, "defaultProps", _objectSpread(_objectSpread({}, _reactVirtualized.Table.defaultProps), {}, {
-  width: null,
-  headerHeight: 60,
-  rowHeight: 60,
-  gridStyle: {
-    direction: undefined
-  },
-  // This is required for rows to automatically respect rtl
-  defaultColumnSortIndex: 0,
-  sort: null,
-  sortBy: null,
-  sortDirection: null
-}));
-
-BpkDataTable.propTypes = _objectSpread(_objectSpread({}, (0, _omit2.default)(_reactVirtualized.Table.propTypes, omittedTableProps)), {}, {
-  rows: _propTypes.default.arrayOf(Object).isRequired,
-  children: (0, _hasChildrenOfType.default)(_BpkDataTableColumn.default),
-  width: _propTypes.default.number,
-  headerHeight: _propTypes.default.number,
-  className: _propTypes.default.string,
-  defaultColumnSortIndex: _propTypes.default.number,
-  sort: _propTypes.default.func,
-  sortBy: _propTypes.default.string,
-  sortDirection: _propTypes.default.oneOf(['ASC', 'DESC'])
-});
-var _default = BpkDataTable;
-exports.default = _default;
+BpkDataTable.propTypes = {
+  ..._omit(Table.propTypes, omittedTableProps),
+  rows: PropTypes.arrayOf(Object).isRequired,
+  children: hasChildrenOfType(BpkDataTableColumn),
+  width: PropTypes.number,
+  headerHeight: PropTypes.number,
+  className: PropTypes.string,
+  defaultColumnSortIndex: PropTypes.number,
+  sort: PropTypes.func,
+  sortBy: PropTypes.string,
+  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
+};
+
+export default BpkDataTable;

package/bpk-component-datatable/src/BpkDataTable.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-data-table{width:100%}.bpk-data-table__header-column{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table__header-column:hover{cursor:pointer}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #f1f2f8;border-bottom:none;outline-offset:-.25rem;color:#444560;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-data-table__row:last-child{border-bottom:1px solid #f1f2f8}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#f1f2f8;cursor:pointer;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0770e3 inset}.bpk-data-table__row--selected{background-color:#dddde5;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0770e3 inset}

package/bpk-component-datatable/src/BpkDataTable.module.scss

@@ -0,0 +1,95 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+$bpk-border-size-datatable: $bpk-border-size-xl * 2;
+
+@mixin bpk-datatable-border-left() {
+  @include _bpk-border-left(
+    $bpk-border-size-datatable,
+    $bpk-color-sky-blue,
+    inset
+  );
+}
+
+@mixin bpk-datatable-border-right() {
+  @include _bpk-border-right(
+    $bpk-border-size-datatable,
+    $bpk-color-sky-blue,
+    inset
+  );
+}
+
+.bpk-data-table {
+  width: 100%;
+
+  &__header-column {
+    display: flex;
+    height: 100%;
+    margin: bpk-spacing-base();
+    flex-direction: row;
+    align-items: center;
+    outline-offset: -(4 * $bpk-one-pixel-rem);
+
+    @include bpk-label-2;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
+    border-bottom: none;
+    outline-offset: -(4 * $bpk-one-pixel-rem);
+    color: $bpk-color-sky-gray-tint-01;
+
+    @include bpk-footnote;
+
+    &:last-child {
+      border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
+    }
+
+    &--clickable:not(.bpk-data-table__header-row):hover {
+      background-color: $bpk-color-sky-gray-tint-07;
+      cursor: pointer;
+
+      @include bpk-datatable-border-left;
+
+      @include bpk-rtl {
+        @include bpk-datatable-border-right;
+      }
+    }
+
+    &--selected {
+      background-color: $bpk-color-sky-gray-tint-06;
+
+      @include bpk-datatable-border-left;
+
+      @include bpk-rtl {
+        @include bpk-datatable-border-right;
+      }
+    }
+  }
+}

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -1,65 +1,64 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactVirtualized = require("react-virtualized");
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _bpkHeaderRenderer = _interopRequireDefault(require("./bpkHeaderRenderer"));
-
-var _BpkDataTableColumnModule = _interopRequireDefault(require("./BpkDataTableColumn.css"));
-
-const _excluded = ["className"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+/*
+ * 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.
+ */
+/* @flow strict */
+
+import React, { type Element } from 'react';
+import { Column } from 'react-virtualized';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import bpkHeaderRenderer from './bpkHeaderRenderer';
+import STYLES from './BpkDataTableColumn.module.scss';
+import { type SortDirectionType } from './sort-types';
+
+export type BpkDataTableColumnProps = {
+  className: ?string,
+  dataKey: string,
+  disableSort: boolean,
+  defaultSortDirection: SortDirectionType,
+};
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getClassName = cssModules(STYLES);
 
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDataTableColumnModule.default); // BpkDataTableColumn is just a props wrapper since Table only accepts Column children
+// BpkDataTableColumn is just a props wrapper since Table only accepts Column children
 // BpkDataTable uses BpkDataTableColumn.toColumn to convert BpkDataTableColumn to Columns
 // eslint-disable-next-line no-unused-vars
+const BpkDataTableColumn = (props: BpkDataTableColumnProps) => null;
 
-const BpkDataTableColumn = props => null;
-
-BpkDataTableColumn.toColumn = (bpkDataTableColumn, key) => {
-  const _bpkDataTableColumn$p = bpkDataTableColumn.props,
-        {
-    className
-  } = _bpkDataTableColumn$p,
-        rest = _objectWithoutProperties(_bpkDataTableColumn$p, _excluded);
-
+BpkDataTableColumn.toColumn = (
+  bpkDataTableColumn: Element<typeof BpkDataTableColumn>,
+  key,
+) => {
+  const { className, ...rest } = bpkDataTableColumn.props;
   const classNames = [getClassName('bpk-data-table-column')];
 
   if (className) {
     classNames.push(className);
-  } // $FlowFixMe[cannot-spread-inexact]
+  }
 
+  // $FlowFixMe[cannot-spread-inexact]
+  return <Column className={classNames.join(' ')} key={key} {...rest} />;
+};
 
-  return /*#__PURE__*/_react.default.createElement(_reactVirtualized.Column, _extends({
-    className: classNames.join(' '),
-    key: key
-  }, rest));
+BpkDataTableColumn.propTypes = { ...Column.propTypes };
+BpkDataTableColumn.defaultProps = {
+  ...Column.defaultProps,
+  headerRenderer: bpkHeaderRenderer,
 };
 
-BpkDataTableColumn.propTypes = _objectSpread({}, _reactVirtualized.Column.propTypes);
-BpkDataTableColumn.defaultProps = _objectSpread(_objectSpread({}, _reactVirtualized.Column.defaultProps), {}, {
-  headerRenderer: _bpkHeaderRenderer.default
-});
-var _default = BpkDataTableColumn;
-exports.default = _default;
+export default BpkDataTableColumn;

package/bpk-component-datatable/src/BpkDataTableColumn.module.scss

@@ -0,0 +1,65 @@
+/*
+ * 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-spacing-v2: true;
+
+$bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
+
+.bpk-data-table-column {
+  margin: bpk-spacing-base();
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bpk-data-table-column__header {
+  display: inline-block;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.bpk-data-table-column__sort-icons {
+  margin: 0 0 0 $bpk-margin-size-sort-icons;
+
+  @include bpk-rtl {
+    margin: 0 $bpk-margin-size-sort-icons 0 0;
+  }
+}
+
+.bpk-data-table-column__sort-icon {
+  display: block;
+  fill: $bpk-color-sky-gray-tint-04;
+
+  &:hover {
+    fill: $bpk-color-sky-gray-tint-02;
+  }
+
+  &--selected {
+    &,
+    &:hover {
+      fill: $bpk-color-sky-blue-shade-01;
+    }
+  }
+}
+
+.bpk-data-table-column__sort-icon--up {
+  margin-bottom: -(bpk-spacing-sm());
+}