diff --git a/README.md b/README.md index b128c6a..63334d7 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# React Dynamic JSON Table + | Tests | Code Coverage | CodeFactor | Sonar Cloud | NPM Status | Doc's Site | | ----------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Tests](https://github.com/github/docs/actions/workflows/test.yml/badge.svg) | 76.4% | [![CodeFactor](https://www.codefactor.io/repository/github/sajrashid/react-dynamic-json-table/badge)](https://www.codefactor.io/repository/github/sajrashid/react-dynamic-json-table) | [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=sajrashid_React-Dynamic-Json-Table&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=sajrashid_React-Dynamic-Json-Table) | [![NPM](https://nodei.co/npm/react-dj-table.png?compact=true)](https://nodei.co/npm/react-dj-table/) | [![Netlify Status](https://api.netlify.com/api/v1/badges/ad1de4da-ad86-4c8f-a533-732539d451a7/deploy-status)](https://app.netlify.com/sites/react-dj-table/deploys) | @@ -9,7 +11,8 @@ * 📋 [Changelog](./CHANGELOG.md) * ✨ [Contributing](./contributing.md) -# React Dynamic JSON Table +## Background + Some tables require lot's of boiler plate code, with changes across the stack if anything is modified, others a just too basic. This a fully Editable dynamic table, that's also relatively feature rich, easy to configure, supports pagination, sorting and filtering out of the box, that actually tries to handle data intelligently @@ -17,9 +20,11 @@ This a fully Editable dynamic table, that's also relatively feature rich, easy t It's no slouch either, tested with 10K, 100K, 1M rows if you really want to exercise your CPU. ## Minimal Boiler-Plate Code + Auto column mapping, Configurable options such as identity columns ### Features + * CRUD * ID columns * Label Columns @@ -29,41 +34,56 @@ Auto column mapping, Configurable options such as identity columns * and lot's [more](https://react-dj-table.netlify.app/) ### CSS Agnostic, Doc's and Examples + Tailwind, Syamtic UI React, Bootstrap examples ### Tests Tests Tests + Code Coverage is growing fast, CI is working. happy day's.. run the tests in the repo ### Documentation an Examples -[Doc's](https://react-dj-table.netlify.app/), Code-Sand-Box examples. +[Doc's](https://react-dj-table.netlify.app/), Code-Sand-Box examples. >Install + ```js yarn add react-dj-table ``` + >Add Import + ```js Import Table from 'react-dj-table' ``` + >Supply Data + ```js const data = ... //some json array ``` + >Add Component + ```html ``` + ### Paging + Pretty standard built in pager.. or roll your own ### Editing + Fully CRUD - smart(ish) edit built it, validate and revert user changes before you commit them to your data store Intuitive buttons, create a record , change the data, watch as it guides the user. ### Hackable + You got access to the reducers dispatch functions, state TBD (next patch release) + ### Feature Requests + See Github discussions [Demo](https://react-dj-table.netlify.app/), Code-Sand-Box examples. @@ -87,4 +107,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! - diff --git a/src/components/react-dj-table/index.js b/src/components/react-dj-table/index.js index 9e67ced..f75ef0b 100644 --- a/src/components/react-dj-table/index.js +++ b/src/components/react-dj-table/index.js @@ -12,9 +12,28 @@ import Thead from './children/thead' const Table = (props) => { // setup initial state + if (props.json === undefined || props.json === null) { + throw new Error("props.json is null or undefined"); + } + if (!Array.isArray(props.json)) { + throw new Error("JSON must be an array type []"); + } + if (props.json.length < 1) { + throw new Error("Json Data length is 0"); + } + + + const options = props.options || {} let json = props.json || [] - const colspan = Object.keys(json[0]).length + + + + + let columns = json.length > 0 ? Object.keys(json[0]) : [] + + let colspan = json.length > 0 ? Object.keys(columns).length : 0 + const selectedRowCss = options.selectedRowCss || '' const sortDirection = 'asc' const searchInputCss = options.searchInputCss || '' @@ -42,12 +61,10 @@ const Table = (props) => { const initialState = { json: json, jsonCopy: props.json, options: options, pageable: pageable, selectedRow: {}, selectedRowCopy: null, selectedRowCss: selectedRowCss, sortDirection: sortDirection, pagerInput: pagerInput, pageSize: pageSize, pageSizeCopy: pageSize, totalPages: totalPages, - colspan: colspan, insertId: null, crudBtns: crudBtns, dataChanged: false, inserting: false, userAction: 'NOACTION', creating: false, editing: true, pageNo: pageNo, pagerIcons: pagerIcons, searchString: '' + columns: columns, colspan: colspan, insertId: null, crudBtns: crudBtns, dataChanged: false, inserting: false, userAction: 'NOACTION', creating: false, editing: true, pageNo: pageNo, pagerIcons: pagerIcons, searchString: '' } const [state, dispatch] = useReducer(TableReducer, initialState) - React.useEffect(() => { - console.log("props:", props) dispatch({ type: ACTIONS.UPDATEPROPS, payload: { updatedProps: props } }) }, [props]) @@ -80,9 +97,14 @@ const Table = (props) => { - + + {json.length < 1 ? : + + + } - {footer && + { + footer &&
@@ -117,7 +139,7 @@ Table.propTypes = { Table.defaultProps = { - json: [], + json: [{}], options: { tableCss: '', cellStyles: '', diff --git a/src/tests/dateCols.test.js b/src/tests/dateCols.test.js index 319f630..358d880 100644 --- a/src/tests/dateCols.test.js +++ b/src/tests/dateCols.test.js @@ -3,436 +3,12 @@ import data from "../data.json"; import pretty from "pretty"; import { render } from "@testing-library/react"; -const table = document.createElement("table"); -const tbody = document.createElement("tbody"); -const tr = document.createElement("tr"); -document.body.appendChild(table); -table.appendChild(tbody); +const div = document.createElement("DIV"); +document.body.appendChild(div); test("renders without dateCols", async () => { const { container } = render(, { - container: tbody.appendChild(tr), - }); - - expect(pretty(container.innerHTML)).toMatchInlineSnapshot(` - "
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
idsoldManufacturerModelYearCostCreditCardsPurchaseDate
1 Aston MartinVantage2009$7774.28jcb2019-01-26T14:00:49Z
2 Maybach622007$9729.34diners-club-carte-blanche2019-01-26T14:00:49Z
3 DodgeCaravan2005$1218.90maestro2019-01-26T14:00:49Z
4 NissanTitan2004$1075.62visa2019-01-26T14:00:49Z
5 Land RoverDefender1997$5430.04visa-electron2019-01-26T14:00:49Z
6 FordThunderbird1986$4588.51diners-club-carte-blanche2019-01-26T14:00:49Z
7 GMCYukon2003$4278.83jcb2019-01-26T14:00:49Z
8 ToyotaPrius c2012$5038.96jcb2019-01-26T14:00:49Z
9 ChevroletExpress 25002010$4776.16china-unionpay2019-01-26T14:00:49Z
10 MercuryCougar1969$8667.00jcb2019-01-26T14:00:49Z
11 OldsmobileRegency1997$4045.67americanexpress2019-01-26T14:00:49Z
" - `); /* ... gets filled automatically by jest ... */ -}); - -const options = { - dateCols: [{ RetiredDate: "" }], -}; - -test("renders with dateCols options", async () => { - const { container } = render(, { - container: tbody.appendChild(tr), - }); - - expect(pretty(container.innerHTML)).toMatchInlineSnapshot(` - "
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
idsoldManufacturerModelYearCostCreditCardsPurchaseDate
1 Aston MartinVantage2009$7774.28jcb2019-01-26T14:00:49Z
2 Maybach622007$9729.34diners-club-carte-blanche2019-01-26T14:00:49Z
3 DodgeCaravan2005$1218.90maestro2019-01-26T14:00:49Z
4 NissanTitan2004$1075.62visa2019-01-26T14:00:49Z
5 Land RoverDefender1997$5430.04visa-electron2019-01-26T14:00:49Z
6 FordThunderbird1986$4588.51diners-club-carte-blanche2019-01-26T14:00:49Z
7 GMCYukon2003$4278.83jcb2019-01-26T14:00:49Z
8 ToyotaPrius c2012$5038.96jcb2019-01-26T14:00:49Z
9 ChevroletExpress 25002010$4776.16china-unionpay2019-01-26T14:00:49Z
10 MercuryCougar1969$8667.00jcb2019-01-26T14:00:49Z
11 OldsmobileRegency1997$4045.67americanexpress2019-01-26T14:00:49Z
" - `); -}); - -options.dateCols = [{ RetiredDate: "en-GB" }]; - -test("renders with dateCols options en-gb", async () => { - const { container } = render(, { - container: tbody.appendChild(tr), - }); - - expect(pretty(container.innerHTML)).toMatchInlineSnapshot(` - "
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
idsoldManufacturerModelYearCostCreditCardsPurchaseDate
1 Aston MartinVantage2009$7774.28jcb2019-01-26T14:00:49Z
2 Maybach622007$9729.34diners-club-carte-blanche2019-01-26T14:00:49Z
3 DodgeCaravan2005$1218.90maestro2019-01-26T14:00:49Z
4 NissanTitan2004$1075.62visa2019-01-26T14:00:49Z
5 Land RoverDefender1997$5430.04visa-electron2019-01-26T14:00:49Z
6 FordThunderbird1986$4588.51diners-club-carte-blanche2019-01-26T14:00:49Z
7 GMCYukon2003$4278.83jcb2019-01-26T14:00:49Z
8 ToyotaPrius c2012$5038.96jcb2019-01-26T14:00:49Z
9 ChevroletExpress 25002010$4776.16china-unionpay2019-01-26T14:00:49Z
10 MercuryCougar1969$8667.00jcb2019-01-26T14:00:49Z
11 OldsmobileRegency1997$4045.67americanexpress2019-01-26T14:00:49Z
" - `); -}); - -const dateoptions = { - dateCols: [{ RetiredDate: "en-GB" }], - dateOptions: { - weekday: "short", - year: "numeric", - month: "short", - day: "numeric", - }, -}; - -test("renders with dateCols dateOptions", async () => { - const { container } = render(, { - container: tbody.appendChild(tr), + container: div, }); expect(pretty(container.innerHTML)).toMatchInlineSnapshot(`