Merge pull request #269 from HybridFox/feature/table

Feature/table

CHANGELOG.md

@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Added
+- `Table` - added table component
 
 ## v6.2.1 - 2021-12-13
 

package.json

@@ -14,7 +14,7 @@
     "start": "npx styleguidist server",
     "test": "jest --coverage",
     "bootstrap": "lerna bootstrap --hoist",
-    "build": "lerna exec --parallel -- rollup -c",
+    "build": "lerna exec --sort -- rollup -c",
     "postbuild": "rollup -c",
     "publish": "lerna publish --skip-git --skip-npm",
     "prepublish": "npm run build"
@@ -69,7 +69,7 @@
   "dependencies": {
     "@a-ui/core": "^5.0.0",
     "classnames": "~2.2.6",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "react-input-mask": "^2.0.4",
     "react-modal": "~3.5.1",
     "rxjs": "^6.6.2"

packages/autocomplete/package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "classnames": "~2.2.6",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "icon": "0.0.1-0",
+    "taglist": "0.0.1-0"
   }
 }

packages/calendar/src/Datepicker/Body.js

@@ -131,4 +131,4 @@ class Body extends Component {
 		)
 	}
 }
-export default Body;
+export default Body;

packages/form/src/Datepicker/Datepicker.js

@@ -104,7 +104,7 @@ class Datepicker extends Component<Props> {
     if (this.datepicker && this.datepicker.contains(e.target)) {
       return;
     }
-    
+
     this.setState({ open: false });
   };
 

packages/table/Readme.md

@@ -0,0 +1,151 @@
+
+### Full example
+Full fledged table:
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS, TABLE_MOCK_FILTER } = require('./src/mocks/Table.mock.js');
+
+const [sorting, setSorting] = React.useState();
+const [pagination, setPagination] = React.useState({
+  itemsPerPage: 10,
+  totalItems: 1829,
+  currentPage: 1
+});
+
+<Table
+  tableId="1"
+  columns={TABLE_MOCK_COLUMNS()}
+  rows={TABLE_MOCK_ROWS.slice(0, 10)}
+  filters={TABLE_MOCK_FILTER}
+  sorting={sorting}
+  sortingChanged={(e) => console.log('sorting changed', e) || setSorting(e)}
+  paginationChanged={(e) => console.log('pagination changed', e) || setPagination(e)}
+  filtersChanged={(e) => console.log('filters changed', e)}
+  itemsPerPage={pagination.itemsPerPage}
+  totalItems={pagination.totalItems}
+  currentPage={pagination.currentPage}
+/>
+```
+
+### Filter examples
+Filters values:
+
+| Key         | Value                                                     | Description                                                      |
+|-------------|-----------------------------------------------------------|------------------------------------------------------------------|
+| id          | _string_                                                  | ID to identify the filter when returning data                    |
+| display     | "generic" / "optional"                                    | "generic" to show as the main filter, "optional" if the filter should appear under the extra filter dropdown |
+| type        | "input" / "datepicker" / "select" / "telephone-number"    | Type of field to show                                            |
+| label       | _string_                                                  | Label of the field                                               |
+| placeholder | _string_                                                  | Placeholder of the field                                         |
+| options     | _{ id: string; label: string; }[]_                        | Options to use if "select" type                                  |
+
+Table with only 1 `generic` filter:
+```js static
+const FILTERS = [{
+  id: "smartfilter",
+  display: "generic",
+  type: "input",
+  label: "Zoek op voornaam",
+  placeholder: "Zoek op voornaam",
+}]
+```
+
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS, TABLE_MOCK_FILTER } = require('./src/mocks/Table.mock.js');
+
+<Table
+  tableId="1"
+  columns={TABLE_MOCK_COLUMNS()}
+  rows={TABLE_MOCK_ROWS.slice(0, 2)}
+  filters={[{
+    id: "smartfilter",
+    display: "generic",
+    type: "input",
+    label: "Zoek op voornaam",
+    placeholder: "Zoek op voornaam",
+  }]}
+/>
+```
+
+Only optional filters:
+```js static
+const FILTERS = [{
+  id: "firstName",
+  type: "input",
+  label: "Zoek op voornaam",
+  placeholder: "Zoek op voornaam",
+}, {
+  id: "lastName",
+  type: "input",
+  label: "Zoek op achternaam",
+  placeholder: "Zoek op achternaam",
+}]
+```
+
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS, TABLE_MOCK_FILTER } = require('./src/mocks/Table.mock.js');
+
+<Table
+  tableId="1"
+  columns={TABLE_MOCK_COLUMNS()}
+  rows={TABLE_MOCK_ROWS.slice(0, 2)}
+  filters={[{
+    id: "firstName",
+    type: "input",
+    label: "Zoek op voornaam",
+    placeholder: "Zoek op voornaam",
+  }, {
+    id: "lastName",
+    type: "input",
+    label: "Zoek op achternaam",
+    placeholder: "Zoek op achternaam",
+  }]}
+/>
+```
+
+### State examples
+Loading table
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS } = require('./src/mocks/Table.mock.js');
+
+<Table tableId="2" columns={TABLE_MOCK_COLUMNS()} rows={TABLE_MOCK_ROWS.slice(0, 5)} loading={true} />
+```
+
+Without column sorting
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS } = require('./src/mocks/Table.mock.js');
+
+<Table tableId="2" columns={TABLE_MOCK_COLUMNS()} rows={TABLE_MOCK_ROWS.slice(0, 2)} disableColumnSorting={true} />
+```
+
+Styles
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS } = require('./src/mocks/Table.mock.js');
+
+<>
+  <div className="u-margin-bottom">
+    <Table tableId="3" columns={TABLE_MOCK_COLUMNS()} rows={TABLE_MOCK_ROWS.slice(0, 4)} striped={false} />
+  </div>
+
+  <div className="u-margin-bottom">
+    <Table tableId="4" columns={TABLE_MOCK_COLUMNS()} rows={TABLE_MOCK_ROWS.slice(0, 2)} type="primary" />
+  </div>
+
+  <Table tableId="5" columns={TABLE_MOCK_COLUMNS()} rows={TABLE_MOCK_ROWS.slice(0, 2)} type="secondary" />
+</>
+```
+
+Extra table actions
+```js
+const { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_FILTER } = require('./src/mocks/Table.mock.js');
+const Button = require('../button').default;
+
+<Table
+  tableId="5"
+  columns={TABLE_MOCK_COLUMNS()}
+  rows={TABLE_MOCK_ROWS.slice(0, 2)}
+  extraTableActions={(
+    <Button icon="ai-pencil-1" className="u-margin-right-xs" />
+  )}
+  filters={TABLE_MOCK_FILTER}
+/>
+```

packages/table/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "table",
+  "version": "0.0.1-0",
+  "description": "",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rc-slider": "~8.6.1",
+    "classnames": "~2.2.6",
+    "moment": "^2.24.0",
+    "react-input-mask": "^2.0.4",
+    "icon": "0.0.1-0"
+  }
+}