From d2a227d993ec7a6c707d2a6f5d3b941199dcbe95 Mon Sep 17 00:00:00 2001 From: Eduard Carrerars Date: Thu, 3 Aug 2023 11:35:28 +0200 Subject: [PATCH 1/3] Responsive with styled component components --- src/Table.tsx | 2 +- src/components/Cell.tsx | 1 + src/components/Container.tsx | 31 +++++++++++++++++++++++++++++-- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/Table.tsx b/src/Table.tsx index 41cba31..55e7a98 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -77,7 +77,7 @@ export const Table = (props: TableProps) => { }, [toggleAllRowsSelected, getAllVisibleKeys]); return ( - + diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx index 16e72a4..3ecb097 100644 --- a/src/components/Cell.tsx +++ b/src/components/Cell.tsx @@ -65,6 +65,7 @@ export const Cell = ({ level={level} />
+
{column.title}
{renderedContent}
diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 33be1cd..bc95909 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,8 +1,14 @@ import styled from "styled-components"; +type ContainerProps = { + height?: number, + canClick: boolean, + readonly?: boolean, +} + export const Container = styled.div` overflow-x: auto; - height: ${({ height }: { height?: number; canClick: boolean }) => + height: ${({ height }: ContainerProps) => `${height}px` || "auto"}; border-bottom: 1px solid #f0f0f0; @@ -12,7 +18,7 @@ export const Container = styled.div` width: 100%; tr { - cursor: ${({ canClick }: { height?: number; canClick: boolean }) => + cursor: ${({ canClick }: ContainerProps) => canClick ? "pointer" : "auto"}; user-select: none; @@ -70,5 +76,26 @@ export const Container = styled.div` border-right: 0; } } + + /* Responsive */ + @media (max-width: 991px) { + thead { + display: none; + } + + td:nth-of-type(1) { + width: ${(props: ContainerProps) => props.readonly ? 'auto !important' : '50px'}; + display: ${(props: ContainerProps) => props.readonly ? 'block' : ''}; + } + + td:nth-of-type(n + 2) { + display: block; + width: auto !important; + } + + .rft-label { + display: block !important; + } + } } `; From 799e81d3d62f64a20f7240aae26a0364ff6ada66 Mon Sep 17 00:00:00 2001 From: Eduard Carrerars Date: Thu, 3 Aug 2023 11:35:56 +0200 Subject: [PATCH 2/3] Refactor story --- src/stories/Table.stories.tsx | 289 +++++++--------------------------- 1 file changed, 53 insertions(+), 236 deletions(-) diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx index ad0f7d5..0338ece 100644 --- a/src/stories/Table.stories.tsx +++ b/src/stories/Table.stories.tsx @@ -15,23 +15,7 @@ const meta: ComponentMeta = { }; export default meta; -export const Primary: ComponentStoryObj = { - args: { - loading: false, - loadingComponent: , - height: 300, - onRowSelectionChange: (selectedRows: any) => { - console.log("selectedRows: " + JSON.stringify(selectedRows)); - }, - onRowStyle: () => undefined, - onRowDoubleClick: (record: any) => { - alert("double clicked record" + JSON.stringify(record)); - }, - sorter: { id: "name", desc: true }, - onChangeSort: (sorter: Sorter | undefined) => { - console.log("onChangeSort: ", sorter); - }, - columns: [ +const columns = [ { title: "Name", key: "name", @@ -90,8 +74,9 @@ export const Primary: ComponentStoryObj = { return 
{JSON.stringify(item, null, 2)}
; }, }, - ], - dataSource: [ + ]; + +const dataSource = [ { id: 0, name: "A. John", @@ -114,7 +99,26 @@ export const Primary: ComponentStoryObj = { value: "Test value", }, }, - ], + ]; + +export const Primary: ComponentStoryObj = { + args: { + loading: false, + loadingComponent: , + height: 300, + onRowSelectionChange: (selectedRows: any) => { + console.log("selectedRows: " + JSON.stringify(selectedRows)); + }, + onRowStyle: () => undefined, + onRowDoubleClick: (record: any) => { + alert("double clicked record" + JSON.stringify(record)); + }, + sorter: { id: "name", desc: true }, + onChangeSort: (sorter: Sorter | undefined) => { + console.log("onChangeSort: ", sorter); + }, + columns, + dataSource, }, }; @@ -136,90 +140,8 @@ export const Readonly: ComponentStoryObj = { onChangeSort: (sorter: Sorter | undefined) => { console.log("onChangeSort: ", sorter); }, - columns: [ - { - title: "Name", - key: "name", - }, - { - title: "Surnames", - key: "surnames", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Image", - key: "image", - render: (item: any) => { - return ; - }, - }, - { - title: "Object", - key: "object", - render: (item: any) => { - return 
{JSON.stringify(item, null, 2)}
; - }, - }, - ], - dataSource: [ - { - id: 0, - name: "A. John", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_161118_2054_ynlrg.png", - object: { - model: "test", - value: "Test value", - }, - }, - { - id: 1, - name: "B. Jane", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_170130_2257_9qgawp.png", - object: { - model: "test", - value: "Test value", - }, - }, - ], + columns, + dataSource, }, }; @@ -268,90 +190,8 @@ export const Status: ComponentStoryObj = { onChangeSort: (sorter: Sorter | undefined) => { console.log("onChangeSort: ", sorter); }, - columns: [ - { - title: "Name", - key: "name", - }, - { - title: "Surnames", - key: "surnames", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Address", - key: "address", - }, - { - title: "Address 2", - key: "address2", - }, - { - title: "Address 3", - key: "address3", - }, - { - title: "Image", - key: "image", - render: (item: any) => { - return ; - }, - }, - { - title: "Object", - key: "object", - render: (item: any) => { - return 
{JSON.stringify(item, null, 2)}
; - }, - }, - ], - dataSource: [ - { - id: 0, - name: "A. John", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_161118_2054_ynlrg.png", - object: { - model: "test", - value: "Test value", - }, - }, - { - id: 1, - name: "B. Jane", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_170130_2257_9qgawp.png", - object: { - model: "test", - value: "Test value", - }, - }, - ], + columns, + dataSource, }, }; @@ -362,6 +202,29 @@ const otherChilds = [ { id: 6, name: "Six thur", surnames: "Ficht" }, ]; +export const StatusReadonly: ComponentStoryObj = { + args: { + loading: false, + loadingComponent: , + height: 300, + onRowSelectionChange: (selectedRows: any) => { + console.log("selectedRows: " + JSON.stringify(selectedRows)); + }, + onRowStyle: () => undefined, + onRowStatus: getStatusForItem, + onRowDoubleClick: (record: any) => { + alert("double clicked record" + JSON.stringify(record)); + }, + sorter: { id: "name", desc: true }, + readonly: true, + onChangeSort: (sorter: Sorter | undefined) => { + console.log("onChangeSort: ", sorter); + }, + columns, + dataSource, + }, +}; + export const Expandable = (): React.ReactElement => { const [results, setResults] = useState([ { @@ -439,54 +302,8 @@ export const CustomCellRender: ComponentStoryObj = { onCellRender: (opts: OnCellRenderOpts) => { return <>onCellRender content: {JSON.stringify(opts, null, 2)}; }, - columns: [ - { - title: "Name", - key: "name", - }, - { - title: "Surnames", - key: "surnames", - }, - { - title: "Image", - key: "image", - render: (item: any) => { - return ; - }, - }, - { - title: "Object", - key: "object", - render: (item: any) => { - return 
{JSON.stringify(item, null, 2)}
; - }, - }, - ], - dataSource: [ - { - id: 0, - name: "A. John", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_161118_2054_ynlrg.png", - object: { - model: "test", - value: "Test value", - }, - }, - { - id: 1, - name: "B. Jane", - surnames: "Doe", - image: - "https://pickaface.net/gallery/avatar/unr_sample_170130_2257_9qgawp.png", - object: { - model: "test", - value: "Test value", - }, - }, - ], + columns, + dataSource, }, }; From 19c37b2f5be14ee1d4f4fcd342c9e56d1a2178da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= Date: Thu, 3 Aug 2023 11:57:36 +0200 Subject: [PATCH 3/3] Bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b77494..6d3f363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gisce/react-formiga-table", - "version": "0.8.2", + "version": "0.8.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@gisce/react-formiga-table", - "version": "0.8.2", + "version": "0.8.3", "dependencies": { "react": "^16.8.0 || 17.x", "react-dom": "^16.8.0 || 17.x", diff --git a/package.json b/package.json index 4b7a59d..359bcc4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gisce/react-formiga-table", - "version": "0.8.2", + "version": "0.8.3", "scripts": { "build": "tsc && vite build", "prepublishOnly": "npm run build",