Merge pull request #156 from onaio/tableStylesRefactor

Table styles refactor

packages/DrillDownTable/README.md

@@ -6,13 +6,21 @@ It makes use of the following hooks from react-table:
 
 - useSortBy
 - usePagination
+- useResizeColumns
+- useFlexLayout
 
 ## Installation
 
 ```sh
 yarn add @onaio/drill-down-table
 ```
 
+You can opt to use the default styles by adding this to your component's file
+
+```ts
+import '@onaio/drill-down-table/dist/table.css';
+```
+
 ## Displaying Hierarchical Data
 
 DrillDownTable was made to let you easily display hierarchically structured data in nice tables that allow you to drill down through the hierarchical levels of the data.
@@ -68,18 +76,18 @@ These are:
 
 #### columns && data
 
-**Required**
+_Required_
 these 2 props should be structured as defined by react-table.
 
 #### identifierField
 
-**Optional**(`string` = `id`)
+_Optional_(`string` = `id`)
 
 Which field in the data represents the unique identifier for a row of data? This is optional, but if you do not define it then the default is set to `id`.
 
 #### parentIdentifierField
 
-**Optional**(`string` = `parent_id`)
+_Optional_(`string` = `parent_id`)
 
 Which field in the data represents the unique identifier of the parent of a row of data? This is optional, but if you do not define it then the default is set to `parent_id`.
 
@@ -93,7 +101,7 @@ This is also optional and defaults to `null`.
 
 #### linkerField
 
-**Optional**(`string` | `undefined` = `undefined`)
+_Optional_(`string` | `undefined` = `undefined`)
 
 When the table is rendered, you can click anywhere on a row to drill down to the next level of the hierarchy. However, you may want to display some kind of indication that it is possible to drill down on a row of data. The `linkerField` prop allows you to define which field should have this indicator. By default this is set to the `id` field.
 
@@ -107,63 +115,63 @@ This is an object that represents extra props to be given to the `CellComponent`
 
 #### useDrillDown
 
-**Optional**(`boolean` = `true`)
+_Optional_(`boolean` = `true`)
 
 By default `DrillDownTable` allows you to click on any row to drill-down to the next hierarchical level of data. This is achieved by adding a custom onClick handler to the cells that render the linker field. To switch this off and have the table render as a normal table, set `useDrillDown` to `false`.
 
 #### renderInTopFilterBar
 
-**Optional**(`(prop) => ReactNode` | `undefined` = `undefined`)
+_Optional_(`(prop) => ReactNode` | `undefined` = `undefined`)
 
 add a section immediately above table for filter components, through a render prop
 
 #### renderInBottomFilterBar
 
-**Optional**(`(prop) => ReactNode` | `undefined` = `undefined`)
+_Optional_(`(prop) => ReactNode` | `undefined` = `undefined`)
 
 add a section immediately below table for filter components, through a render prop
 
 #### nullDataComponent
 
-**Optional**(`React.ElementType` = `<default component>`)
+_Optional_(`() => React.ReacNode` = `<default component>`)
 
-A custom component to be rendered when data is an empty array.
+A renderProp that renders a custom component when data is an empty array.
 
 #### loading
 
-**Optional**(`boolean` = `false`)
+_Optional_(`boolean` = `false`)
 
 A boolean switch that makes the table render a custom
 
 #### loadingComponent
 
-**Optional**(`React.ElementType` = `<default component>`)
+_Optional_(`React.ElementType` = `<default component>`)
 
 A custom component that should be rendered when loading is true.
 
 #### getTdProps
 
-**optional**(`(cell: Cell) => Dictionary` | `undefined` = `undefined`)
+_optional_(`(cell: Cell) => Dictionary` | `undefined` = `undefined`)
 
 Use this to pass in a custom prop getter for the table cell elements.
 
 While the default for this is undefined, the table component does make use of a customTdProps getter that attaches a onClick handler that effects drilling down, This handler is only used when `useDrillDown = true` and `getTdProps` is undefined, otherwise if `getTdProps` is propped in then the component uses that as the click handler
 
 #### paginate
 
-**optional**(`boolean` = `true`)
+_optional_(`boolean` = `true`)
 
 Tells the component if should paginate the data. setting this to false will have the component show all of its data as a single page.
 
 #### resize
 
-**optional**(`boolean` = `true`)
+_optional_(`boolean` = `true`)
 
 Make table columns resizeable.
 
 #### hasChildren
 
-**Optional**
+_Optional_
 
 This is a function that returns a `boolean` indicating whether or not a row of data has children i.e. should you be able to drill down using the given row?
 
@@ -296,7 +304,7 @@ Adding global filter components like pagination
 
 // write the pagination component
 const CustomPagination = (props) => {
-    return <>{/** pagination JSX */}</>
+    return <>{/* pagination JSX */}</>
 }
 
 // create a render prop that takes the [TableInstance properties](https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#instance-properties) adds custom properties and passes them to the CustomPagination component

packages/DrillDownTable/dist/components/HelperComponents/index.js

@@ -11,18 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../../helpers/constants");
 
-var defaultNullDataProps = {
-  noDataFound: _constants.NO_DATA_FOUND
-};
-
-var NullDataComponent = function NullDataComponent(props) {
+var NullDataComponent = function NullDataComponent() {
   return _react["default"].createElement("div", {
     className: "jumbotron"
-  }, _react["default"].createElement("p", null, props.noDataFound));
+  }, _react["default"].createElement("p", null, _constants.NO_DATA_FOUND));
 };
 
 exports.NullDataComponent = NullDataComponent;
-NullDataComponent.defaultProps = defaultNullDataProps;
 
 var DropDownCell = function DropDownCell(props) {
   var cellValue = props.cellValue,

packages/DrillDownTable/dist/components/Pagination/index.js

@@ -12,8 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../../helpers/constants");
 
-require("./pagination.css");
-
 var defaultPaginationProps = {
   nextText: _constants.NEXT,
   ofText: _constants.OF,

packages/DrillDownTable/dist/components/TableJSX.js

@@ -27,8 +27,6 @@ var _HelperComponents = require("./HelperComponents");
 
 var _SortIcon = require("./SortIcon");
 
-require("./table.css");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -43,9 +41,9 @@ var defaultTableProps = {
   hasChildren: hasChildrenFunc,
   identifierField: _constants.ID,
   linkerField: _constants.ID,
-  nullDataComponent: _HelperComponents.NullDataComponent,
   paginate: true,
   parentIdentifierField: _constants.PARENT_ID,
+  renderNullDataComponent: _HelperComponents.NullDataComponent,
   resize: true,
   rootParentId: _constants.ROOT_PARENT_ID,
   useDrillDown: true
@@ -143,12 +141,7 @@ function Table(props) {
       className: "tr"
     }), headerGroup.headers.map(function (c, index) {
       var column = c;
-      return _react["default"].createElement("div", (0, _extends2["default"])({}, column.getHeaderProps(column.getSortByToggleProps([{
-        style: {
-          minHeight: rHeight,
-          lineHeight: rHeight
-        }
-      }])), {
+      return _react["default"].createElement("div", (0, _extends2["default"])({}, column.getHeaderProps(column.getSortByToggleProps([])), {
         key: "thead-th-".concat(index),
         className: "th"
       }), column.render('Header'), column.canSort && _react["default"].createElement(_SortIcon.SortIcon, {
@@ -176,7 +169,7 @@ function Table(props) {
         className: "td"
       }), cell.render('Cell'));
     }));
-  }))), data.length === 0 && _react["default"].createElement(props.nullDataComponent, null), props.renderInBottomFilterBar && props.renderInBottomFilterBar(_objectSpread({}, tableProps, {
+  }))), data.length === 0 && props.renderNullDataComponent(), props.renderInBottomFilterBar && props.renderInBottomFilterBar(_objectSpread({}, tableProps, {
     setRowHeight: setRowHeight
   })));
 }

packages/DrillDownTable/dist/helpers/constants.js

@@ -27,7 +27,7 @@ var CARET_SPAN = _react["default"].createElement("span", {
 }, "\xA0\u25BC");
 
 exports.CARET_SPAN = CARET_SPAN;
-var DEFAULT_ROW_HEIGHT = '2em';
+var DEFAULT_ROW_HEIGHT = '1.5em';
 exports.DEFAULT_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
 var NO_DATA_FOUND = 'No Data Found';
 exports.NO_DATA_FOUND = NO_DATA_FOUND;

packages/DrillDownTable/dist/components/Pagination/pagination.css → packages/DrillDownTable/dist/table.css

@@ -1,3 +1,85 @@
+div.div-table {
+  display: table;
+}
+div.div-table .tr {
+  display: table-row;
+}
+div.div-table .thead {
+  display: table-header-group;
+}
+div.div-table .td,
+.th {
+  display: table-cell;
+}
+div.div-table .tbody {
+  display: table-row-group;
+}
+
+div.div-table {
+  margin: 10px 0;
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border-radius: 5px;
+}
+div.div-table .td,
+div.div-table .th {
+  border-width: 1px 0 0 1px;
+  border-style: solid;
+  border-color: #dee2e6;
+  padding: 12px;
+}
+
+.table .tbody .tr:last-of-type .td {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table .tbody .tr .td:last-of-type,
+.table .thead .tr .th:last-of-type {
+  border-right: 1px solid #dee2e6;
+}
+
+.table .thead {
+  border-bottom: 1px solid #dee2e6;
+}
+
+div.div-table .tbody .tr:nth-child(odd) {
+  background-color: #f2f2f2;
+}
+div.div-table .thead .th {
+  background: #fff;
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow-x: hidden;
+  word-wrap: ellipsis;
+}
+div.div-table .thead .th {
+  font-weight: bold;
+}
+
+div.div-table .tbody .tr:hover {
+  background-color: #e0e0e0;
+}
+
+div.div-table .resizer {
+  display: inline-block;
+  background: #ffffff;
+  width: 5px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(50%);
+  z-index: 1;
+  /* prevents from scrolling while dragging on touch devices */
+  touch-action: none;
+}
+div.div-table .resizer.isResizing {
+  background: #ccc;
+}
+
+/** Pagination css */
 .pagination {
   float: right;
 }

packages/DrillDownTable/dist/types/components/DrillDownTable.d.ts

@@ -24,7 +24,7 @@ export declare const defaultDrillDownTableProps: {
     renderInTopFilterBar?: import("./TableJSX").FilterBarRenderer<{}> | undefined;
     renderInBottomFilterBar?: import("./TableJSX").FilterBarRenderer<{}> | undefined;
     rootParentId: string | null;
-    nullDataComponent: React.ElementType<any>;
+    renderNullDataComponent: () => React.ReactNode;
     linkerField?: string | undefined;
     useDrillDown: boolean;
     getTdProps?: ((cell: Cell<{}, any>) => Dictionary<any>) | undefined;
@@ -50,7 +50,7 @@ declare namespace DrillDownTable {
         renderInTopFilterBar?: import("./TableJSX").FilterBarRenderer<{}> | undefined;
         renderInBottomFilterBar?: import("./TableJSX").FilterBarRenderer<{}> | undefined;
         rootParentId: string | null;
-        nullDataComponent: React.ElementType<any>;
+        renderNullDataComponent: () => React.ReactNode;
         linkerField?: string | undefined;
         useDrillDown: boolean;
         getTdProps?: ((cell: Cell<{}, any>) => Dictionary<any>) | undefined;