feat: 🎸 improve <ListTable> and add reference to docs

README.md

@@ -94,6 +94,7 @@ const MyComponent = mock();
      - [`<OutsideClick>`](./docs/en/OutsideClick.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./docs/en/Img.md)
+     - [`<ListTable>`](./docs/en/ListTable.md)
      - [`<WidthQuery>`](./docs/en/WidthQuery.md), [`<View>`](./docs/en/View.md), [`<WindowWidthQuery>`](./docs/en/WindowWidthQuery.md), and [`<InlineWidthQuery>`](./docs/en/InlineWidthQuery.md)
      - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
      - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md)

docs/en/ListTable.md

@@ -0,0 +1,27 @@
+# `<ListTable>`
+
+Wraps `children` into a table with specified column number.
+
+## Usage
+
+Below renders 2x3 table.
+
+```jsx
+import {ListTable} from 'libreact/lib/ListTable';
+
+<ListTable cols={2}>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+</ListTable>
+```
+
+
+## Props
+
+- `cols` &mdash; optional, number or columns table should have, defaults to `3`.
+- `renderRow` &mdash; optional, function that receives an array of `<td>` cells as React
+  elements and should return a `<tr>` React element, defaults to `cells => h('tr', null, ...cells)`.

docs/en/README.md

@@ -60,6 +60,7 @@
      - [`<OutsideClick>`](./OutsideClick.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./Img.md)
+     - [`<ListTable>`](./ListTable.md)
      - [`<WidthQuery>`](./WidthQuery.md), [`<View>`](./View.md), [`<WindowWidthQuery>`](./WindowWidthQuery.md), and [`<InlineWidthQuery>`](./InlineWidthQuery.md)
      - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`

docs/en/SUMMARY.md

@@ -68,6 +68,7 @@
   * [OutsideClick](OutsideClick.md)
   * [Ripple](Ripple.md)
   * [Img](Img.md)
+  * [ListTable](ListTable.md)
   * [Group](Group.md)
   * [InfiniteScroll](InfiniteScroll.md)
   * [WidthQuery](WidthQuery.md)

src/ListTable/__story__/story.tsx

@@ -4,7 +4,7 @@ import {ListTable} from '..';
 import ShowDocs from '../../ShowDocs'
 
 storiesOf('UI/ListTable', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ListTable.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ListTable.md')}))
   .add('Default', () =>
     <ListTable>
       <div>1</div>

src/ListTable/index.ts

@@ -4,12 +4,12 @@ const h = React.createElement;
 
 const defaultRenderRow = cells => h('tr', null, ...cells);
 
-export interface Props {
+export interface Props extends React.AllHTMLAttributes<any> {
   cols?: number;
   renderRow?: (cells: React.ReactElement<any>[]) => React.ReactElement<any>;
 }
 
-export const ListTable: React.SFC<Props> = ({cols, renderRow, children}) => {
+export const ListTable: React.SFC<Props> = ({cols, renderRow, children, ...rest}) => {
   const list = React.Children.toArray(children);
   const rows: React.ReactElement<any>[] = [];
   const length = list.length;
@@ -25,7 +25,7 @@ export const ListTable: React.SFC<Props> = ({cols, renderRow, children}) => {
     rows.push(renderRow(cells));
   }
 
-  return h('table', null, h('tbody', null,
+  return h('table', rest, h('tbody', null,
     ...rows,
   ));
 };