From b6be8ae836aadc49f2a0bc7e0059433b9b827563 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Mon, 28 Jan 2019 17:30:57 +0100 Subject: [PATCH 1/5] Improve Table width handling --- src/Table/Table.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index a9898f311..acf8d7028 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -23,6 +23,8 @@ export interface TableProps extends DefaultProps { iconColor?: (dataEntry: T) => string /** Remove the header? */ headless?: boolean + /** Fixed Layout for performance */ + fixedLayout?: boolean } export interface Column { @@ -30,15 +32,17 @@ export interface Column { cell: (dataEntry: T, index: number) => React.ReactNode sortOrder?: "asc" | "desc" onSortClick?: (order: "asc" | "desc") => void + width?: number } -const Container = styled("table")(({ theme }) => ({ +const Container = styled("table")<{ fixedLayout: TableProps["fixedLayout"] }>(({ theme, fixedLayout }) => ({ width: "100%", backgroundColor: theme.color.white, textAlign: "left", borderCollapse: "collapse", fontSize: theme.font.size.small, fontFamily: theme.font.family.main, + tableLayout: fixedLayout ? "fixed" : "initial", })) const Tr = styled("tr")<{ hover?: boolean; clickable?: boolean }>(({ hover, theme, clickable }) => ({ @@ -88,13 +92,17 @@ const ThContent = styled("span")<{ sorted?: boolean }>` ${props => props.sorted && `color: ${props.theme.color.text.light};`}; ` -const Td = styled("td")(({ theme }) => ({ +const Td = styled("td")<{ cellWidth?: Column["width"] }>(({ theme, cellWidth }) => ({ verticalAlign: "middle", borderBottom: `1px solid ${theme.color.separators.default}`, color: theme.color.text.default, + wordBreak: "break-all", + wordWrap: "break-word", + hyphens: "auto", "&:first-child": { paddingLeft: theme.space.small, }, + ...(cellWidth ? { width: cellWidth } : {}), })) const Actions = styled(Td)(({ theme }) => ({ @@ -148,6 +156,7 @@ function Table({ icon, iconColor, headless, + fixedLayout, ...props }: TableProps) { const standardizedColumns: Array> = columns.map(column => { @@ -164,7 +173,7 @@ function Table({ const hasIcons: boolean = Boolean(data[0]) && Boolean(icon) && Boolean(icon!(data[0])) return ( - + {!headless && ( @@ -234,7 +243,9 @@ function Table({ )} {standardizedColumns.map((column, columnIndex) => ( - {column.cell(dataEntry, dataEntryIndex)} + + {column.cell(dataEntry, dataEntryIndex)} + ))} {rowAction} {onRowClick && From 00277fba8e8ed60cecc4ffc2b1eb6b6dbc1df78d Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Mon, 28 Jan 2019 17:35:35 +0100 Subject: [PATCH 2/5] Update Snapshots --- src/Table/__tests__/__snapshots__/Table.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Table/__tests__/__snapshots__/Table.test.tsx.snap b/src/Table/__tests__/__snapshots__/Table.test.tsx.snap index d712a3aff..ef663042b 100644 --- a/src/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/src/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -8,7 +8,7 @@ exports[`Table Component Should render 1`] = ` class="css-ar73w8-Messages" />
There are no records available From c5dfaf9eeea27b8bcd682bd249ce17c4bfdb3ee4 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Tue, 29 Jan 2019 13:44:00 +0100 Subject: [PATCH 3/5] Add Example to README --- src/Table/README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/src/Table/README.md b/src/Table/README.md index 31ba60a6c..d009d6b52 100644 --- a/src/Table/README.md +++ b/src/Table/README.md @@ -11,6 +11,18 @@ You can render a simple use-case of the table by specifying a list of records an /> ``` +### With Fixed Layout + +Tables perform better with a forced fixed layout, since the browser doesn't have to recalculate positions depending on the contents of the table. Here's what the same table looks like with a fixed layout. + +```js + +``` + ### Simple Usage without Header ```js @@ -78,6 +90,63 @@ const data = [ /> ``` +### With custom widths per column + +We can customize the look of the table by specifying a `width` property on certain columns. + +```jsx +const data = [ + { + name: "Mega Deal Dev", + lastUpdated: "2018-06-06", + tags: ["agent-view", "production"], + collaborators: [ + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + ], + }, + { + name: "Mega Deal Dev", + lastUpdated: "2018-06-06", + tags: ["agent-view", "production"], + collaborators: [ + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + ], + }, + { + name: "Toy Bundle", + lastUpdated: "2018-06-06", + tags: ["agent-view", "production"], + collaborators: [ + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" }, + ], + }, +] +;
}, + { heading: "Name", width: 600, cell: dataEntry => dataEntry.name }, + { heading: "Last updated", cell: dataEntry => dataEntry.lastUpdated }, + { + heading: "Tags", + width: 100, + cell: dataEntry => dataEntry.tags.map((tag, tagIndex) => {tag}), + }, + { heading: "Collaborators", cell: dataEntry => }, + ]} + onRowClick={(dataEntry, i) => console.log({ dataEntry, i })} +/> +``` + ### With icons ```jsx From 4f1da70607b5e201c122544e91fbb0ca2504ee51 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Tue, 29 Jan 2019 13:46:29 +0100 Subject: [PATCH 4/5] Break words only if width --- src/Table/Table.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index acf8d7028..aed11414d 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -96,13 +96,17 @@ const Td = styled("td")<{ cellWidth?: Column["width"] }>(({ theme, cellWidt verticalAlign: "middle", borderBottom: `1px solid ${theme.color.separators.default}`, color: theme.color.text.default, - wordBreak: "break-all", - wordWrap: "break-word", hyphens: "auto", "&:first-child": { paddingLeft: theme.space.small, }, - ...(cellWidth ? { width: cellWidth } : {}), + ...(cellWidth + ? { + width: cellWidth, + wordBreak: "break-all", + wordWrap: "break-word", + } + : {}), })) const Actions = styled(Td)(({ theme }) => ({ From e6eb29dd6b2ef5a728113a141ef99540fb12d942 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Tue, 29 Jan 2019 13:49:28 +0100 Subject: [PATCH 5/5] Update snapshots. Again. --- src/Table/__tests__/__snapshots__/Table.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Table/__tests__/__snapshots__/Table.test.tsx.snap b/src/Table/__tests__/__snapshots__/Table.test.tsx.snap index ef663042b..b09dcdeeb 100644 --- a/src/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/src/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -22,7 +22,7 @@ exports[`Table Component Should render 1`] = ` class="css-16kb41" >
There are no records available