@ctablex/core - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

CHANGELOG.md

@@ -5,2 +5,18 @@ # Changelog
 
+## [0.3.0](https://github.com/sahabpardaz/ctablex/compare/v0.2.1...v0.3.0) (2020-12-20)
+
+### Features
+
+- add default children to table/table-body/table-header/row/rows components ([#29](https://github.com/sahabpardaz/ctablex/issues/29)) ([7091f5f](https://github.com/sahabpardaz/ctablex/commit/7091f5fb389e21e635752167556a2a6127fd1d97))
+- **columns:** add part props in columns usage ([#27](https://github.com/sahabpardaz/ctablex/issues/27)) ([1de25ca](https://github.com/sahabpardaz/ctablex/commit/1de25ca6e52771caa22ee735164fcff534233970))
+- accept and pass props to underlying components ([#28](https://github.com/sahabpardaz/ctablex/issues/28)) ([d672f4d](https://github.com/sahabpardaz/ctablex/commit/d672f4d914f5a1b7ce5c0480e782dc33550782fe))
+
+### Examples
+
+- **complex-content:** add complex content example ([#25](https://github.com/sahabpardaz/ctablex/issues/25)) ([7553c57](https://github.com/sahabpardaz/ctablex/commit/7553c57f57f29e29e146c4795ff9f93fc414dd37))
+
+### Documentations
+
+- update readme and use new api ([#30](https://github.com/sahabpardaz/ctablex/issues/30)) ([494dab0](https://github.com/sahabpardaz/ctablex/commit/494dab029130c27be2cbcc56944ad770479327a1))
+
 ### [0.2.1](https://github.com/sahabpardaz/ctablex/compare/v0.2.0...v0.2.1) (2020-07-19)
@@ -7,0 +23,0 @@

dist/ctablex.js

@@ -30,3 +30,3 @@ (function (global, factory) {
 function findColumns(children) {
-  var columnsChildren = React__default.Children.map(children, function (child) {
+  return React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child) && isColumnsType(child.type)) {
@@ -38,3 +38,2 @@ return child;
   });
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, columnsChildren);
 }
@@ -109,16 +108,27 @@
 
+function UseColumns(props) {
+  var columns = useColumns();
+  var partColumns = React__default.Children.map(columns, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      if (child.props.part === props.part) {
+        return /*#__PURE__*/React__default.createElement(React.Fragment, null, child.props.children);
+      }
+    }
+
+    return null;
+  });
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, partColumns);
+}
+
 function Columns(props) {
-  var children = props.children,
-      part = props.part;
   var currentPart = useTablePart();
+  var part = props.part;
 
-  if (part === undefined && currentPart !== 'header' && currentPart !== 'body') {
+  if (currentPart === 'definition') {
     return null;
   }
 
-  if (part !== undefined && currentPart !== part) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, children);
+  return /*#__PURE__*/React__default.createElement(UseColumns, {
+    part: part
+  });
 }
@@ -205,13 +215,15 @@ Columns.__COLUMNS__ = true;
   var accessor = props.accessor,
-      children = props.children;
+      children = props.children,
+      TdProps = props.TdProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(ContentValue, {
     accessor: accessor
-  }, /*#__PURE__*/React__default.createElement(Components.Td, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Td, TdProps, children));
 }
 
 function HeaderCell(props) {
-  var children = props.children;
+  var children = props.children,
+      ThProps = props.ThProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React__default.createElement(Components.Th, null, children);
+  return /*#__PURE__*/React__default.createElement(Components.Th, ThProps, children);
 }
@@ -224,10 +236,15 @@
       accessor = _props$accessor === void 0 ? null : _props$accessor,
-      header = props.header;
+      header = props.header,
+      ThProps = props.ThProps,
+      TdProps = props.TdProps;
   var part = useTablePart();
 
   if (part === 'header') {
-    return /*#__PURE__*/React__default.createElement(HeaderCell, null, header);
+    return /*#__PURE__*/React__default.createElement(HeaderCell, {
+      ThProps: ThProps
+    }, header);
   }
 
   return /*#__PURE__*/React__default.createElement(Cell, {
+    TdProps: TdProps,
     accessor: accessor
@@ -237,16 +254,20 @@ }, children);
 
+function HeaderRow(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  return /*#__PURE__*/React__default.createElement(Components.Tr, TrProps, children);
+}
+
 function TableHeader(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(HeaderRow, null) : _props$children,
+      TheadProps = props.TheadProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(TablePartProvider, {
     value: "header"
-  }, /*#__PURE__*/React__default.createElement(Components.Thead, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Thead, TheadProps, children));
 }
 
-function HeaderRow(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  return /*#__PURE__*/React__default.createElement(Components.Tr, null, columns);
-}
-
 var IndexContext = /*#__PURE__*/React.createContext(undefined);
@@ -307,4 +328,16 @@ function useIndex() {
 
+function Row(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React__default.createElement(RowDataProvider, {
+    value: row
+  }, /*#__PURE__*/React__default.createElement(Components.Tr, TrProps, children));
+}
+
 function Rows(props) {
-  var children = props.children,
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Row, null) : _props$children,
       keyAccessor = props.keyAccessor;
@@ -325,23 +358,19 @@ var data = useData(props.data);
 
-function Row(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  var row = useCurrentValue(props.row);
-  return /*#__PURE__*/React__default.createElement(RowDataProvider, {
-    value: row
-  }, /*#__PURE__*/React__default.createElement(Components.Tr, null, columns));
-}
-
 function TableBody(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Rows, null) : _props$children,
+      TbodyProps = props.TbodyProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(TablePartProvider, {
     value: "body"
-  }, /*#__PURE__*/React__default.createElement(Components.Tbody, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Tbody, TbodyProps, children));
 }
 
 function Table(props) {
-  var children = props.children;
+  var defaultChildren = /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeader, null), /*#__PURE__*/React__default.createElement(TableBody, null));
+  var _props$children = props.children,
+      children = _props$children === void 0 ? defaultChildren : _props$children,
+      TableProps = props.TableProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React__default.createElement(Components.Table, null, children);
+  return /*#__PURE__*/React__default.createElement(Components.Table, TableProps, children);
 }
@@ -379,2 +408,3 @@
 exports.TablePartProvider = TablePartProvider;
+exports.UseColumns = UseColumns;
 exports.defaultTableComponents = defaultTableComponents;
@@ -381,0 +411,0 @@ exports.findColumns = findColumns;

dist/ctablex.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ctablex={},e.React)}(this,(function(e,t){"use strict";var r="default"in t?t.default:t,n=t.createContext(void 0);function u(){var e=t.useContext(n);if(void 0===e)throw Error("useColumns must be used inside the <ColumnsProvider/>");return e}function a(e){return r.createElement(n.Provider,{value:e.value},e.children)}function o(e){return!(!e||!e.__COLUMNS__)}function l(e){var n=r.Children.map(e,(function(e){return r.isValidElement(e)&&o(e.type)?e:null}));return r.createElement(t.Fragment,null,n)}var i=t.createContext(void 0);function c(){var e=t.useContext(i);if(void 0===e)throw Error("useTablePart must be used inside the <TablePartProvider/>");return e}function d(e){return r.createElement(i.Provider,{value:e.value},e.children)}var v=t.createContext(void 0);function s(e){var r=t.useContext(v);if(void 0!==e)return e;if(void 0===r)throw Error("useData must be used inside the <DataProvider/>");return r}function f(e){return r.createElement(v.Provider,{value:e.value},e.children)}var m={Table:"table",Thead:"thead",Tbody:"tbody",Tr:"tr",Th:"th",Td:"td"},C=t.createContext(m);function h(){return t.useContext(C)}function E(e){var n=e.children,u=e.part,a=c();return void 0===u&&"header"!==a&&"body"!==a||void 0!==u&&a!==u?null:r.createElement(t.Fragment,null,n)}E.__COLUMNS__=!0;var x=t.createContext(void 0);function b(){var e=t.useContext(x);if(void 0===e)throw Error("useRowData must be used inside the <RowDataProvider/>");return e}function P(e){return r.createElement(x.Provider,{value:e.value},e.children)}function T(e,t){return null===t?null:"string"==typeof t?function(e,t){var r=t;return e.forEach((function(e){var t;r=null===(t=r)||void 0===t?void 0:t[e]})),r}(t.split("."),e):t(e)}function p(e){var t;return null!==(t=T(b(),e))&&void 0!==t?t:null}var y=t.createContext(void 0);function w(){var e=t.useContext(y);if(void 0===e)throw Error("useContent must be used inside the <ContentProvider/>");return e}function D(e){return r.createElement(y.Provider,{value:e.value},e.children)}function _(e){var n=w();return r.createElement(t.Fragment,null,n)}function R(e){var t=e.accessor,n=e.children,u=void 0===n?r.createElement(_,null):n,a=p(t);return r.createElement(D,{value:a},u)}function g(e){var t=e.accessor,n=e.children,u=h();return r.createElement(R,{accessor:t},r.createElement(u.Td,null,n))}function V(e){var t=e.children,n=h();return r.createElement(n.Th,null,t)}var I=t.createContext(void 0);function F(e){return r.createElement(I.Provider,{value:e.value},e.children)}var M=t.createContext(void 0);function O(e){var r=t.useContext(M);if(void 0!==e)return e;if(void 0===r)throw Error("useCurrentValue must be used inside the <ItemProvider/>");return r}function H(e){return r.createElement(M.Provider,{value:e.value},e.children)}var j=function(e,t){return t};function k(e){var n=e.children,u=e.getKey,a=void 0===u?j:u;return r.createElement(t.Fragment,null,e.value.map((function(e,t){return r.createElement(H,{value:e,key:a(e,t)},r.createElement(F,{value:t},n))})))}e.ArrayOutput=k,e.Cell=g,e.Column=function(e){var t=e.children,n=void 0===t?r.createElement(_,null):t,u=e.accessor,a=void 0===u?null:u,o=e.header;return"header"===c()?r.createElement(V,null,o):r.createElement(g,{accessor:a},n)},e.Columns=E,e.ColumnsContext=n,e.ColumnsProvider=a,e.ContentContext=y,e.ContentProvider=D,e.ContentValue=R,e.CurrentValueContext=M,e.CurrentValueProvider=H,e.DataContext=v,e.DataProvider=f,e.DataTable=function(e){var t=e.children,n=l(t),u=s(e.data);return r.createElement(f,{value:u},r.createElement(d,{value:"definition"},r.createElement(a,{value:n},t)))},e.DefaultContent=_,e.HeaderCell=V,e.HeaderRow=function(e){var t=h(),n=u();return r.createElement(t.Tr,null,n)},e.IndexContext=I,e.IndexProvider=F,e.Row=function(e){var t=h(),n=u(),a=O(e.row);return r.createElement(P,{value:a},r.createElement(t.Tr,null,n))},e.RowDataContext=x,e.RowDataProvider=P,e.Rows=function(e){var n=e.children,u=e.keyAccessor,a=s(e.data),o=t.useMemo((function(){if(u)return function(e){return T(e,u)}}),[u]);return r.createElement(k,{value:a,getKey:o},n)},e.Table=function(e){var t=e.children,n=h();return r.createElement(n.Table,null,t)},e.TableBody=function(e){var t=e.children,n=h();return r.createElement(d,{value:"body"},r.createElement(n.Tbody,null,t))},e.TableComponentsContext=C,e.TableComponentsProvider=function(e){return r.createElement(C.Provider,{value:e.value},e.children)},e.TableHeader=function(e){var t=e.children,n=h();return r.createElement(d,{value:"header"},r.createElement(n.Thead,null,t))},e.TablePartContext=i,e.TablePartProvider=d,e.defaultTableComponents=m,e.findColumns=l,e.getValue=T,e.isColumnsType=o,e.useColumns=u,e.useContent=w,e.useContentValue=p,e.useCurrentValue=O,e.useData=s,e.useIndex=function(){var e=t.useContext(I);if(void 0===e)throw Error("useIndex must be used inside the <IndexProvider/>");return e},e.useRowData=b,e.useTableComponents=h,e.useTablePart=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ctablex={},e.React)}(this,(function(e,t){"use strict";var r="default"in t?t.default:t,n=t.createContext(void 0);function u(){var e=t.useContext(n);if(void 0===e)throw Error("useColumns must be used inside the <ColumnsProvider/>");return e}function o(e){return r.createElement(n.Provider,{value:e.value},e.children)}function a(e){return!(!e||!e.__COLUMNS__)}function l(e){return r.Children.map(e,(function(e){return r.isValidElement(e)&&a(e.type)?e:null}))}var i=t.createContext(void 0);function c(){var e=t.useContext(i);if(void 0===e)throw Error("useTablePart must be used inside the <TablePartProvider/>");return e}function d(e){return r.createElement(i.Provider,{value:e.value},e.children)}var v=t.createContext(void 0);function s(e){var r=t.useContext(v);if(void 0!==e)return e;if(void 0===r)throw Error("useData must be used inside the <DataProvider/>");return r}function m(e){return r.createElement(v.Provider,{value:e.value},e.children)}var f={Table:"table",Thead:"thead",Tbody:"tbody",Tr:"tr",Th:"th",Td:"td"},C=t.createContext(f);function E(){return t.useContext(C)}function h(e){var n=u(),o=r.Children.map(n,(function(n){return t.isValidElement(n)&&n.props.part===e.part?r.createElement(t.Fragment,null,n.props.children):null}));return r.createElement(t.Fragment,null,o)}function P(e){return"definition"===c()?null:r.createElement(h,{part:e.part})}P.__COLUMNS__=!0;var p=t.createContext(void 0);function T(){var e=t.useContext(p);if(void 0===e)throw Error("useRowData must be used inside the <RowDataProvider/>");return e}function x(e){return r.createElement(p.Provider,{value:e.value},e.children)}function b(e,t){return null===t?null:"string"==typeof t?function(e,t){var r=t;return e.forEach((function(e){var t;r=null===(t=r)||void 0===t?void 0:t[e]})),r}(t.split("."),e):t(e)}function y(e){var t;return null!==(t=b(T(),e))&&void 0!==t?t:null}var w=t.createContext(void 0);function D(){var e=t.useContext(w);if(void 0===e)throw Error("useContent must be used inside the <ContentProvider/>");return e}function _(e){return r.createElement(w.Provider,{value:e.value},e.children)}function g(e){var n=D();return r.createElement(t.Fragment,null,n)}function R(e){var t=e.accessor,n=e.children,u=void 0===n?r.createElement(g,null):n,o=y(t);return r.createElement(_,{value:o},u)}function V(e){var t=e.accessor,n=e.children,u=e.TdProps,o=E();return r.createElement(R,{accessor:t},r.createElement(o.Td,u,n))}function I(e){var t=e.children,n=e.ThProps,u=E();return r.createElement(u.Th,n,t)}function F(e){var t=e.TrProps,n=e.children,u=void 0===n?r.createElement(P,null):n,o=E();return r.createElement(o.Tr,t,u)}function M(e){var t=e.children,n=void 0===t?r.createElement(F,null):t,u=e.TheadProps,o=E();return r.createElement(d,{value:"header"},r.createElement(o.Thead,u,n))}var O=t.createContext(void 0);function H(e){return r.createElement(O.Provider,{value:e.value},e.children)}var U=t.createContext(void 0);function j(e){var r=t.useContext(U);if(void 0!==e)return e;if(void 0===r)throw Error("useCurrentValue must be used inside the <ItemProvider/>");return r}function k(e){return r.createElement(U.Provider,{value:e.value},e.children)}var A=function(e,t){return t};function K(e){var n=e.children,u=e.getKey,o=void 0===u?A:u;return r.createElement(t.Fragment,null,e.value.map((function(e,t){return r.createElement(k,{value:e,key:o(e,t)},r.createElement(H,{value:t},n))})))}function L(e){var t=e.TrProps,n=e.children,u=void 0===n?r.createElement(P,null):n,o=E(),a=j(e.row);return r.createElement(x,{value:a},r.createElement(o.Tr,t,u))}function N(e){var n=e.children,u=void 0===n?r.createElement(L,null):n,o=e.keyAccessor,a=s(e.data),l=t.useMemo((function(){if(o)return function(e){return b(e,o)}}),[o]);return r.createElement(K,{value:a,getKey:l},u)}function S(e){var t=e.children,n=void 0===t?r.createElement(N,null):t,u=e.TbodyProps,o=E();return r.createElement(d,{value:"body"},r.createElement(o.Tbody,u,n))}e.ArrayOutput=K,e.Cell=V,e.Column=function(e){var t=e.children,n=void 0===t?r.createElement(g,null):t,u=e.accessor,o=void 0===u?null:u,a=e.header,l=e.ThProps,i=e.TdProps;return"header"===c()?r.createElement(I,{ThProps:l},a):r.createElement(V,{TdProps:i,accessor:o},n)},e.Columns=P,e.ColumnsContext=n,e.ColumnsProvider=o,e.ContentContext=w,e.ContentProvider=_,e.ContentValue=R,e.CurrentValueContext=U,e.CurrentValueProvider=k,e.DataContext=v,e.DataProvider=m,e.DataTable=function(e){var t=e.children,n=l(t),u=s(e.data);return r.createElement(m,{value:u},r.createElement(d,{value:"definition"},r.createElement(o,{value:n},t)))},e.DefaultContent=g,e.HeaderCell=I,e.HeaderRow=F,e.IndexContext=O,e.IndexProvider=H,e.Row=L,e.RowDataContext=p,e.RowDataProvider=x,e.Rows=N,e.Table=function(e){var n=e.children,u=void 0===n?r.createElement(t.Fragment,null,r.createElement(M,null),r.createElement(S,null)):n,o=e.TableProps,a=E();return r.createElement(a.Table,o,u)},e.TableBody=S,e.TableComponentsContext=C,e.TableComponentsProvider=function(e){return r.createElement(C.Provider,{value:e.value},e.children)},e.TableHeader=M,e.TablePartContext=i,e.TablePartProvider=d,e.UseColumns=h,e.defaultTableComponents=f,e.findColumns=l,e.getValue=b,e.isColumnsType=a,e.useColumns=u,e.useContent=D,e.useContentValue=y,e.useCurrentValue=j,e.useData=s,e.useIndex=function(){var e=t.useContext(O);if(void 0===e)throw Error("useIndex must be used inside the <IndexProvider/>");return e},e.useRowData=T,e.useTableComponents=E,e.useTablePart=c,Object.defineProperty(e,"__esModule",{value:!0})}));

es/ctablex.js

@@ -1,2 +0,2 @@
-import React, { createContext, useContext, Fragment, useMemo } from 'react';
+import React, { createContext, useContext, isValidElement, Fragment, useMemo } from 'react';
 
@@ -24,3 +24,3 @@ var ColumnsContext = /*#__PURE__*/createContext(undefined);
 function findColumns(children) {
-  var columnsChildren = React.Children.map(children, function (child) {
+  return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isColumnsType(child.type)) {
@@ -32,3 +32,2 @@ return child;
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, columnsChildren);
 }
@@ -103,16 +102,27 @@
 
+function UseColumns(props) {
+  var columns = useColumns();
+  var partColumns = React.Children.map(columns, function (child) {
+    if ( /*#__PURE__*/isValidElement(child)) {
+      if (child.props.part === props.part) {
+        return /*#__PURE__*/React.createElement(Fragment, null, child.props.children);
+      }
+    }
+
+    return null;
+  });
+  return /*#__PURE__*/React.createElement(Fragment, null, partColumns);
+}
+
 function Columns(props) {
-  var children = props.children,
-      part = props.part;
   var currentPart = useTablePart();
+  var part = props.part;
 
-  if (part === undefined && currentPart !== 'header' && currentPart !== 'body') {
+  if (currentPart === 'definition') {
     return null;
   }
 
-  if (part !== undefined && currentPart !== part) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(Fragment, null, children);
+  return /*#__PURE__*/React.createElement(UseColumns, {
+    part: part
+  });
 }
@@ -199,13 +209,15 @@ Columns.__COLUMNS__ = true;
   var accessor = props.accessor,
-      children = props.children;
+      children = props.children,
+      TdProps = props.TdProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React.createElement(ContentValue, {
     accessor: accessor
-  }, /*#__PURE__*/React.createElement(Components.Td, null, children));
+  }, /*#__PURE__*/React.createElement(Components.Td, TdProps, children));
 }
 
 function HeaderCell(props) {
-  var children = props.children;
+  var children = props.children,
+      ThProps = props.ThProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React.createElement(Components.Th, null, children);
+  return /*#__PURE__*/React.createElement(Components.Th, ThProps, children);
 }
@@ -218,10 +230,15 @@
       accessor = _props$accessor === void 0 ? null : _props$accessor,
-      header = props.header;
+      header = props.header,
+      ThProps = props.ThProps,
+      TdProps = props.TdProps;
   var part = useTablePart();
 
   if (part === 'header') {
-    return /*#__PURE__*/React.createElement(HeaderCell, null, header);
+    return /*#__PURE__*/React.createElement(HeaderCell, {
+      ThProps: ThProps
+    }, header);
   }
 
   return /*#__PURE__*/React.createElement(Cell, {
+    TdProps: TdProps,
     accessor: accessor
@@ -231,16 +248,20 @@ }, children);
 
+function HeaderRow(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  return /*#__PURE__*/React.createElement(Components.Tr, TrProps, children);
+}
+
 function TableHeader(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(HeaderRow, null) : _props$children,
+      TheadProps = props.TheadProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React.createElement(TablePartProvider, {
     value: "header"
-  }, /*#__PURE__*/React.createElement(Components.Thead, null, children));
+  }, /*#__PURE__*/React.createElement(Components.Thead, TheadProps, children));
 }
 
-function HeaderRow(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  return /*#__PURE__*/React.createElement(Components.Tr, null, columns);
-}
-
 var IndexContext = /*#__PURE__*/createContext(undefined);
@@ -301,4 +322,16 @@ function useIndex() {
 
+function Row(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React.createElement(RowDataProvider, {
+    value: row
+  }, /*#__PURE__*/React.createElement(Components.Tr, TrProps, children));
+}
+
 function Rows(props) {
-  var children = props.children,
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Row, null) : _props$children,
       keyAccessor = props.keyAccessor;
@@ -319,25 +352,21 @@ var data = useData(props.data);
 
-function Row(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  var row = useCurrentValue(props.row);
-  return /*#__PURE__*/React.createElement(RowDataProvider, {
-    value: row
-  }, /*#__PURE__*/React.createElement(Components.Tr, null, columns));
-}
-
 function TableBody(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Rows, null) : _props$children,
+      TbodyProps = props.TbodyProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React.createElement(TablePartProvider, {
     value: "body"
-  }, /*#__PURE__*/React.createElement(Components.Tbody, null, children));
+  }, /*#__PURE__*/React.createElement(Components.Tbody, TbodyProps, children));
 }
 
 function Table(props) {
-  var children = props.children;
+  var defaultChildren = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TableHeader, null), /*#__PURE__*/React.createElement(TableBody, null));
+  var _props$children = props.children,
+      children = _props$children === void 0 ? defaultChildren : _props$children,
+      TableProps = props.TableProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React.createElement(Components.Table, null, children);
+  return /*#__PURE__*/React.createElement(Components.Table, TableProps, children);
 }
 
-export { ArrayOutput, Cell, Column, Columns, ColumnsContext, ColumnsProvider, ContentContext, ContentProvider, ContentValue, CurrentValueContext, CurrentValueProvider, DataContext, DataProvider, DataTable, DefaultContent, HeaderCell, HeaderRow, IndexContext, IndexProvider, Row, RowDataContext, RowDataProvider, Rows, Table, TableBody, TableComponentsContext, TableComponentsProvider, TableHeader, TablePartContext, TablePartProvider, defaultTableComponents, findColumns, getValue, isColumnsType, useColumns, useContent, useContentValue, useCurrentValue, useData, useIndex, useRowData, useTableComponents, useTablePart };
+export { ArrayOutput, Cell, Column, Columns, ColumnsContext, ColumnsProvider, ContentContext, ContentProvider, ContentValue, CurrentValueContext, CurrentValueProvider, DataContext, DataProvider, DataTable, DefaultContent, HeaderCell, HeaderRow, IndexContext, IndexProvider, Row, RowDataContext, RowDataProvider, Rows, Table, TableBody, TableComponentsContext, TableComponentsProvider, TableHeader, TablePartContext, TablePartProvider, UseColumns, defaultTableComponents, findColumns, getValue, isColumnsType, useColumns, useContent, useContentValue, useCurrentValue, useData, useIndex, useRowData, useTableComponents, useTablePart };

index.d.ts

@@ -0,5 +1,6 @@
+import { ComponentProps } from 'react';
+import { ComponentType } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { PropsWithChildren } from 'react';
-import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -20,18 +21,42 @@
 
-export declare function Cell<D, C>(props: CellProps<D, C>): JSX.Element;
+export declare function Cell<
+  C extends ComponentType = ComponentType,
+  A extends Accessor<any, any> = Accessor<any, any>
+>(props: CellProps<C, A>): JSX.Element;
 
-declare interface CellOwnProps<D, C> {
-  accessor: Accessor<D, C> | null;
+declare interface CellOwnProps<
+  C extends ComponentType,
+  A extends Accessor<any, any>
+> {
+  accessor: A | null;
+  TdProps?: Partial<ComponentProps<C>>;
 }
 
-export declare type CellProps<D, C> = PropsWithChildren<CellOwnProps<D, C>>;
+export declare type CellProps<
+  C extends ComponentType,
+  A extends Accessor<any, any>
+> = PropsWithChildren<CellOwnProps<C, A>>;
 
-export declare function Column<D, C>(props: ColumnProps<D, C>): JSX.Element;
+export declare function Column<
+  C extends ComponentType = ComponentType,
+  H extends ComponentType = ComponentType,
+  A extends Accessor<any, any> = Accessor<any, any>
+>(props: ColumnProps<C, H, A>): JSX.Element;
 
-declare interface ColumnOwnProps<D, C> {
+declare interface ColumnOwnProps<
+  C extends ComponentType,
+  H extends ComponentType,
+  A extends Accessor<any, any>
+> {
   header?: ReactNode;
-  accessor?: Accessor<D, C> | null;
+  accessor?: A | null;
+  TdProps?: Partial<ComponentProps<C>>;
+  ThProps?: Partial<ComponentProps<H>>;
 }
 
-export declare type ColumnProps<D, C> = PropsWithChildren<ColumnOwnProps<D, C>>;
+export declare type ColumnProps<
+  C extends ComponentType,
+  H extends ComponentType,
+  A extends Accessor<any, any>
+> = PropsWithChildren<ColumnOwnProps<C, H, A>>;
 
@@ -150,3 +175,3 @@ export declare function Columns(props: ColumnsProps): JSX.Element | null;
   children: ReactNode,
-): ReactElement | null;
+): ReactNode;
 
@@ -162,13 +187,25 @@ export declare function getValue<D, C>(data: D, accessor: null): null;
 
-export declare function HeaderCell(props: HeaderCellProps): JSX.Element;
+export declare function HeaderCell<C extends ComponentType = ComponentType>(
+  props: HeaderCellProps<C>,
+): JSX.Element;
 
-declare interface HeaderCellOwnProps {}
+declare interface HeaderCellOwnProps<C extends ComponentType> {
+  ThProps?: Partial<ComponentProps<C>>;
+}
 
-export declare type HeaderCellProps = PropsWithChildren<HeaderCellOwnProps>;
+export declare type HeaderCellProps<
+  C extends ComponentType
+> = PropsWithChildren<HeaderCellOwnProps<C>>;
 
-export declare function HeaderRow(props: HeaderRowProps): JSX.Element;
+export declare function HeaderRow<C extends ComponentType = ComponentType>(
+  props: HeaderRowProps<C>,
+): JSX.Element;
 
-declare interface HeaderRowOwnProps {}
+declare interface HeaderRowOwnProps<C extends ComponentType> {
+  TrProps?: Partial<ComponentProps<C>>;
+}
 
-export declare type HeaderRowProps = PropsWithChildren<HeaderRowOwnProps>;
+export declare type HeaderRowProps<C extends ComponentType> = PropsWithChildren<
+  HeaderRowOwnProps<C>
+>;
 
@@ -197,3 +234,5 @@ export declare type Index = number;
 
-export declare function Row<D>(props: RowProps<D>): JSX.Element;
+export declare function Row<D, C extends ComponentType = ComponentType>(
+  props: RowProps<D, C>,
+): JSX.Element;
 
@@ -216,7 +255,10 @@ export declare type RowData<V> = V;
 
-declare interface RowOwnProps<D> {
+declare interface RowOwnProps<D, C extends ComponentType> {
   row?: D;
+  TrProps?: Partial<ComponentProps<C>>;
 }
 
-export declare type RowProps<D> = PropsWithChildren<RowOwnProps<D>>;
+export declare type RowProps<D, C extends ComponentType> = PropsWithChildren<
+  RowOwnProps<D, C>
+>;
 
@@ -232,9 +274,18 @@ export declare function Rows<D>(props: RowsProps<D>): JSX.Element;
 
-export declare function Table(props: TableProps): JSX.Element;
+export declare function Table<C extends ComponentType = ComponentType>(
+  props: TableProps<C>,
+): JSX.Element;
 
-export declare function TableBody<D>(props: TableBodyProps<D>): JSX.Element;
+export declare function TableBody<D, C extends ComponentType = ComponentType>(
+  props: TableBodyProps<D, C>,
+): JSX.Element;
 
-declare interface TableBodyOwnProps<D> {}
+declare interface TableBodyOwnProps<D, C extends ComponentType> {
+  TbodyProps?: Partial<ComponentProps<C>>;
+}
 
-export declare type TableBodyProps<D> = PropsWithChildren<TableBodyOwnProps<D>>;
+export declare type TableBodyProps<
+  D,
+  C extends ComponentType
+> = PropsWithChildren<TableBodyOwnProps<D, C>>;
 
@@ -264,9 +315,17 @@ export declare interface TableComponents {
 
-export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+export declare function TableHeader<C extends ComponentType = ComponentType>(
+  props: TableHeaderProps<C>,
+): JSX.Element;
 
-declare interface TableHeaderOwnProps {}
+declare interface TableHeaderOwnProps<C extends ComponentType> {
+  TheadProps?: Partial<ComponentProps<C>>;
+}
 
-export declare type TableHeaderProps = PropsWithChildren<TableHeaderOwnProps>;
+export declare type TableHeaderProps<
+  C extends ComponentType
+> = PropsWithChildren<TableHeaderOwnProps<C>>;
 
-declare interface TableOwnProps {}
+declare interface TableOwnProps<C extends ComponentType> {
+  TableProps?: Partial<ComponentProps<C>>;
+}
 
@@ -289,8 +348,18 @@ export declare type TablePart = TablePartType;
 
-export declare type TablePartType = 'definition' | 'header' | 'body' | string;
+export declare type TablePartType = 'definition' | 'header' | 'body';
 
-export declare type TableProps = PropsWithChildren<TableOwnProps>;
+export declare type TableProps<C extends ComponentType> = PropsWithChildren<
+  TableOwnProps<C>
+>;
 
+export declare function UseColumns(props: UseColumnsProps): JSX.Element;
+
 export declare function useColumns(): ColumnsNode;
 
+declare interface UseColumnsOwnProps {
+  part?: string;
+}
+
+export declare type UseColumnsProps = PropsWithChildren<UseColumnsOwnProps>;
+
 export declare function useContent<V>(): Content<V>;
@@ -297,0 +366,0 @@

lib/ctablex.js

@@ -31,3 +31,3 @@ 'use strict';
 function findColumns(children) {
-  var columnsChildren = React__default.Children.map(children, function (child) {
+  return React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child) && isColumnsType(child.type)) {
@@ -39,3 +39,2 @@ return child;
   });
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, columnsChildren);
 }
@@ -110,16 +109,27 @@
 
+function UseColumns(props) {
+  var columns = useColumns();
+  var partColumns = React__default.Children.map(columns, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      if (child.props.part === props.part) {
+        return /*#__PURE__*/React__default.createElement(React.Fragment, null, child.props.children);
+      }
+    }
+
+    return null;
+  });
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, partColumns);
+}
+
 function Columns(props) {
-  var children = props.children,
-      part = props.part;
   var currentPart = useTablePart();
+  var part = props.part;
 
-  if (part === undefined && currentPart !== 'header' && currentPart !== 'body') {
+  if (currentPart === 'definition') {
     return null;
   }
 
-  if (part !== undefined && currentPart !== part) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, children);
+  return /*#__PURE__*/React__default.createElement(UseColumns, {
+    part: part
+  });
 }
@@ -206,13 +216,15 @@ Columns.__COLUMNS__ = true;
   var accessor = props.accessor,
-      children = props.children;
+      children = props.children,
+      TdProps = props.TdProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(ContentValue, {
     accessor: accessor
-  }, /*#__PURE__*/React__default.createElement(Components.Td, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Td, TdProps, children));
 }
 
 function HeaderCell(props) {
-  var children = props.children;
+  var children = props.children,
+      ThProps = props.ThProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React__default.createElement(Components.Th, null, children);
+  return /*#__PURE__*/React__default.createElement(Components.Th, ThProps, children);
 }
@@ -225,10 +237,15 @@
       accessor = _props$accessor === void 0 ? null : _props$accessor,
-      header = props.header;
+      header = props.header,
+      ThProps = props.ThProps,
+      TdProps = props.TdProps;
   var part = useTablePart();
 
   if (part === 'header') {
-    return /*#__PURE__*/React__default.createElement(HeaderCell, null, header);
+    return /*#__PURE__*/React__default.createElement(HeaderCell, {
+      ThProps: ThProps
+    }, header);
   }
 
   return /*#__PURE__*/React__default.createElement(Cell, {
+    TdProps: TdProps,
     accessor: accessor
@@ -238,16 +255,20 @@ }, children);
 
+function HeaderRow(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  return /*#__PURE__*/React__default.createElement(Components.Tr, TrProps, children);
+}
+
 function TableHeader(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(HeaderRow, null) : _props$children,
+      TheadProps = props.TheadProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(TablePartProvider, {
     value: "header"
-  }, /*#__PURE__*/React__default.createElement(Components.Thead, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Thead, TheadProps, children));
 }
 
-function HeaderRow(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  return /*#__PURE__*/React__default.createElement(Components.Tr, null, columns);
-}
-
 var IndexContext = /*#__PURE__*/React.createContext(undefined);
@@ -308,4 +329,16 @@ function useIndex() {
 
+function Row(props) {
+  var TrProps = props.TrProps,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Columns, null) : _props$children;
+  var Components = useTableComponents();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React__default.createElement(RowDataProvider, {
+    value: row
+  }, /*#__PURE__*/React__default.createElement(Components.Tr, TrProps, children));
+}
+
 function Rows(props) {
-  var children = props.children,
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Row, null) : _props$children,
       keyAccessor = props.keyAccessor;
@@ -326,23 +359,19 @@ var data = useData(props.data);
 
-function Row(props) {
-  var Components = useTableComponents();
-  var columns = useColumns();
-  var row = useCurrentValue(props.row);
-  return /*#__PURE__*/React__default.createElement(RowDataProvider, {
-    value: row
-  }, /*#__PURE__*/React__default.createElement(Components.Tr, null, columns));
-}
-
 function TableBody(props) {
-  var children = props.children;
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(Rows, null) : _props$children,
+      TbodyProps = props.TbodyProps;
   var Components = useTableComponents();
   return /*#__PURE__*/React__default.createElement(TablePartProvider, {
     value: "body"
-  }, /*#__PURE__*/React__default.createElement(Components.Tbody, null, children));
+  }, /*#__PURE__*/React__default.createElement(Components.Tbody, TbodyProps, children));
 }
 
 function Table(props) {
-  var children = props.children;
+  var defaultChildren = /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeader, null), /*#__PURE__*/React__default.createElement(TableBody, null));
+  var _props$children = props.children,
+      children = _props$children === void 0 ? defaultChildren : _props$children,
+      TableProps = props.TableProps;
   var Components = useTableComponents();
-  return /*#__PURE__*/React__default.createElement(Components.Table, null, children);
+  return /*#__PURE__*/React__default.createElement(Components.Table, TableProps, children);
 }
@@ -380,2 +409,3 @@
 exports.TablePartProvider = TablePartProvider;
+exports.UseColumns = UseColumns;
 exports.defaultTableComponents = defaultTableComponents;
@@ -382,0 +412,0 @@ exports.findColumns = findColumns;

package.json

 {
   "name": "@ctablex/core",
   "description": "Flexible and powerful react table",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "lib/ctablex.js",

README.md

@@ -32,7 +32,2 @@ # ctablex
   Table,
-  TableHeader,
-  HeaderRow,
-  TableBody,
-  Rows,
-  Row,
 } from '@ctablex/core';
@@ -67,12 +62,3 @@
       </Columns>
-      <Table>
-        <TableHeader>
-          <HeaderRow />
-        </TableHeader>
-        <TableBody>
-          <Rows>
-            <Row />
-          </Rows>
-        </TableBody>
-      </Table>
+      <Table />
     </DataTable>
@@ -85,2 +71,62 @@ );
 
+### The `Table` component
+
+The `Table`/`TableHeader`/`HeaderRow`/`TableBody`/`Rows`/`Row` components have default children. so when you write `<Table />`, it's equal to you write the following codes:
+
+```tsx
+<Table>
+  <TableHeader>
+    <HeaderRow>
+      <Columns />
+    </HeaderRow>
+  </TableHeader>
+  <TableBody>
+    <Rows>
+      <Row>
+        <Columns />
+      </Row>
+    </Rows>
+  </TableBody>
+</Table>
+```
+
+### The `Columns` component
+
+You can assume `<Columns />` component somehow renders `Columns`' children defined in the first part (`definition` part).
+
+```tsx
+<DataTable data={data}>
+  <Columns>
+    {/* begin children definition */}
+    <Column header="Name" accessor="name" />
+    <Column header="Price" accessor="price" />
+    <Column header="Count" accessor="count" />
+    {/* end children definition */}
+  </Columns>
+  <TableBody>
+    <Rows>
+      <Row>
+        <Columns />
+      </Row>
+    </Rows>
+  </TableBody>
+</DataTable>
+```
+
+is equal to
+
+```tsx
+<DataTable data={data}>
+  <TableBody>
+    <Rows>
+      <Row>
+        <Column header="Name" accessor="name" />
+        <Column header="Price" accessor="price" />
+        <Column header="Count" accessor="count" />
+      </Row>
+    </Rows>
+  </TableBody>
+</DataTable>
+```
+
 ## Changelog
@@ -87,0 +133,0 @@

src/index.ts

@@ -11,2 +11,3 @@ export { DataTable } from './data/DataTable';
 export { Columns } from './column/Columns';
+export { UseColumns } from './column/UseColumns';
 export { Column } from './column/Column';
@@ -13,0 +14,0 @@ export {

src/types.d.ts

@@ -26,2 +26,3 @@ export {
 export { ColumnsProps } from './column/Columns';
+export { UseColumnsProps } from './column/UseColumns';
 export { ContentValueProps } from './content/ContentValue';
@@ -28,0 +29,0 @@ export { DataTableProps } from './data/DataTable';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111997

increased by13.48%

Number of package files

44

increased by2.33%

Lines of code

2480

increased by12.83%

Number of lines in readme file

136

increased by51.11%

No dependency changes