diff --git a/dist/helpers.js b/dist/helpers.js index ff4a6fb..413afe5 100644 --- a/dist/helpers.js +++ b/dist/helpers.js @@ -1 +1 @@ -"use strict";var _react=_interopRequireDefault(require("react"));require("core-js/modules/es.array.includes"),require("core-js/modules/es.array.map"),require("core-js/modules/es.string.includes"),Object.defineProperty(exports,"__esModule",{value:!0}),exports.Pages=exports.PageLimit=exports.NOOP=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var NOOP=function(){return null};exports.NOOP=NOOP;var PageLimit=function(a){var b=a.value,c=a.onChange;return _react["default"].createElement("select",{className:"react-dynamic-table-page-limit",onChange:c,value:b},_react["default"].createElement("option",{value:5},"5"),_react["default"].createElement("option",{value:10},"10"),_react["default"].createElement("option",{value:15},"15"),_react["default"].createElement("option",{value:20},"20"))};exports.PageLimit=PageLimit;var Pages=function(a){var b=Math.abs,c=a.value,d=a.total,e=void 0===d?1:d,f=a.delta,g=void 0===f?5:f,h=a.onChange;if(1>=e)return null;for(var j,k=[],l=1;l=e)return null;for(var j,k=[],l=1;la.length)&&(b=a.length);for(var c=0,d=Array(b);cl.indexOf(a)){d.splice(m,1,null);continue}if(g.length){for(var p=!1,q=0;qa.length)&&(b=a.length);for(var c=0,d=Array(b);cl.indexOf(a)){d.splice(m,1,null);continue}if(g.length){for(var p=!1,q=0;q +
fieldWidth
+ + +
+
+ +The `fieldWidth` prop should be an object of attributes and integers. This allows table cell widths to be defined for each field. + +```jsx + +``` diff --git a/src/helpers.jsx b/src/helpers.jsx index a11cbad..a1d155f 100644 --- a/src/helpers.jsx +++ b/src/helpers.jsx @@ -57,3 +57,33 @@ export const Pages = ({ value, total = 1, delta = 5, onChange }) => { ) } + +export const Row = ({ key, row, fields, fieldWidths, dataManipulator, actions, isChecked, onClick, onToggle }) => ( + + {onToggle && ( + + )} + {fields.map(field => ( + + ))} + {!!actions && ( + + )} + +) diff --git a/src/index.js b/src/index.js index e3e811a..f6795e5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,10 @@ -import { PageLimit, Pages } from './helpers' +import { Row, PageLimit, Pages } from './helpers' import Table from './table' import AjaxTable from './ajax-table' export { + Row, PageLimit, Pages, Table, diff --git a/src/table.jsx b/src/table.jsx index 0689c21..2c3cf3c 100644 --- a/src/table.jsx +++ b/src/table.jsx @@ -3,7 +3,7 @@ import { useSetState, useMount, useUpdateEffect } from 'react-use' import PropTypes from 'prop-types' import classNames from 'classnames' -import { NOOP, PageLimit, Pages } from './helpers' +import { NOOP, Row, PageLimit, Pages } from './helpers' const Table = ( { @@ -15,6 +15,7 @@ const Table = ( // fieldMap, fieldOrder, + fieldWidths, fieldsToExclude, fieldsToInclude, // @@ -136,7 +137,8 @@ const Table = ( // Return headers const $headers = () => ( - state.fields.map(field => ( + state.fields.map(field => ([ + field, // Field field is mapped then use the new name // Otherwise attempt to make it friendly to read @@ -146,7 +148,7 @@ const Table = ( .replace(/([A-Z])([A-Z])/g, (_, a, b) => `${a} ${b}`) .toLowerCase() .replace(/([ -_]|^)(.)/g, (_, a, b) => `${a ? ' ' : ''} ${b.toUpperCase()}`) - )) + ])) ) // Only get fields once mounted @@ -185,8 +187,11 @@ const Table = ( )} )} - {$headers().map(header => ( - ))} @@ -204,6 +209,7 @@ const Table = ( key: id, row, fields: state.fields, + fieldWidths, dataManipulator, isChecked: rowIsChecked(id), actions: ( @@ -262,38 +268,14 @@ const Table = ( ) } +Table.row = Row Table.pageLimit = PageLimit Table.pages = Pages Table.defaultProps = { rows: [], rowIdentifier: row => row.id, - rowRenderer: ({ key, row, fields, dataManipulator, actions, isChecked, onClick, onToggle }) => ( - - {onToggle && ( - - )} - {fields.map(field => ( - - ))} - {!!actions && ( - - )} - - ), + rowRenderer: Row, emptyRow: ( @@ -313,6 +295,7 @@ Table.defaultProps = { // fieldMap: {}, fieldOrder: [], + fieldWidths: {}, fieldsToExclude: [], fieldsToInclude: [], // @@ -346,6 +329,7 @@ Table.propTypes = { PropTypes.instanceOf(RegExp) ]) ), + fieldWidths: PropTypes.object, fieldsToExclude: PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.string,
+ + + {dataManipulator({ + field, value: row[field], row + })} + {actions}
+ {$headers().map(([field, header]) => ( + {header}
- - - {dataManipulator({ - field, value: row[field], row - })} - {actions}
There's nothing here.