Add data table #281

balakrishnan-s5 · 2023-08-15T14:03:54Z

Changes

Added component data table

[Delete] branch

Additional information

You may refer to this BOOKINGSG-4436
Figma link

qroll

some initial comments on the api

src/data-table/types.ts

stories/data-table/data-table.stories.mdx

src/data-table/types.ts

qroll · 2023-08-17T02:21:21Z

src/data-table/types.ts

more of a DX question, can take this back for discussion with RBS and your team since you guys will be consuming this component

would devs prefer to work with separate props to configure header and row (current state)

or have a combined config e.g.

columns={[ { header: "Status", // or ReactNode fieldKey: "status", // maps to the object property sort: "asc", // or "desc" onHeaderClick: () => {}, renderRowCell: (value, item, renderProps) => {}, } ]}

As discussed we will keep the header and row configs separated

Still find the current approach awkward. Puts alot of onus on the user to make sure they specify the matching number of header cols and row cols. Let me think more if there is a better way

…dded

… removed

…dded

… removed

…gn-system into add-data-table

…removed

src/data-table/data-table.styles.tsx

qroll · 2023-08-22T01:34:12Z

src/data-table/data-table.styles.tsx

is it intended for the non-first cells to not have horizontal padding? they are misaligned with the headers which do have padding

Screen.Recording.2023-08-22.at.9.31.51.AM.mov

similarly the loader and empty image are not centered

the last column should have the additional right padding as well to match the first column

the last column should have a right padding

qroll · 2023-08-22T01:36:21Z

src/data-table/data-table.styles.tsx

+
+const sortIconStyles = css`
+    color: ${Color.Neutral[1]};
+    font-weight: bold;


this can be removed as there's no font weight for icons

On this same note, if the styles applied are the same for both icons, can consider adding it in the parent element instead and use the svg selector

svg { // your styles here... }

src/data-table/data-table.styles.tsx

src/data-table/types.ts

qroll · 2023-08-22T01:56:20Z

src/data-table/data-table.tsx

+
+    const basicEmptyView = () => {
+        return (
+            <ErrorDisplay


is there a default title/description?

also note that the ErrorDisplay currently doesn't allow empty title/description (it will revert to the placeholder copy). if this functionality is needed, please make the change in a separate PR

separately, the header in ErrorDisplay is H1 but Figma shows H3 for the table. can check with UX if this is ok, otherwise you can override the text styling

keithtxw · 2023-08-23T01:55:09Z

src/data-table/data-table.styles.tsx

+
+const sortIconStyles = css`
+    color: ${Color.Neutral[1]};
+    font-weight: bold;


On this same note, if the styles applied are the same for both icons, can consider adding it in the parent element instead and use the svg selector

svg { // your styles here... }

src/data-table/data-table.tsx

qroll

noting down the outstanding items that should be covered separately:

props changes and error display enhancements (follow up PR)
style changes to match Figma (part 2 PR)
any new features (part 3 PR)
storybook documentation (final PR if needed)

qroll · 2023-08-28T03:32:52Z

src/data-table/data-table.styles.tsx

+    max-width: ${(props) => (props.$maxWidth ? props.$maxWidth : "auto")};
+    vertical-align: middle;
+    ${TextStyleHelper.getFontFamily("H5", "bold")}
+    color: ${Color.Neutral[1]}


to add the semicolon here

qroll · 2023-08-28T03:35:03Z

src/data-table/data-table.styles.tsx

+    justify-content: center;
+`;
+
+export const CheckBox = styled(Checkbox)``;


can be removed if no special styling is required

qroll · 2023-08-28T03:43:12Z

src/data-table/data-table.styles.tsx

the last column should have a right padding

qroll · 2023-08-28T03:49:53Z

src/data-table/data-table.styles.tsx

+    align-items: center;
+`;
+
+export const EmptyDataElement = styled.div`


this seems to be unused

qroll · 2023-08-28T04:06:21Z

src/data-table/data-table.styles.tsx

+    div {
+        h1 {
+            ${TextStyleHelper.getFontFamily("H3", "bold")}
+        }
+    }


not ideal way to style the text elements but will take this for now. let's clarify with UX if h3 is the standard size for an inline error display. we can introduce a prop like displayType: "default" | "small" as part of the follow up PR.

I'll remove the font size and weight change. Follow up URL, I'll get update from UX and do the changes.

balakrishnan-s5 added 11 commits August 10, 2023 17:20

[BOOKINGSG-4436][BK] [DS] Table Component (Basic)

ad5802e

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) props update

059d36d

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) props table update

7bbeb21

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) with checkbox story

2294a5a

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) new stories added

5507a6e

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) checkbox story updated

80da80c

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) new stories added

7e38a1a

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) new stories added

d74b7d5

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Loading stories added

e21699d

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

bda1ffd

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

940efa5

balakrishnan-s5 self-assigned this Aug 15, 2023

balakrishnan-s5 changed the base branch from master to data-table-long-lived August 16, 2023 04:28

qroll reviewed Aug 17, 2023

View reviewed changes

balakrishnan-s5 added 13 commits August 17, 2023 16:03

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

de4f42f

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

9fe7d5d

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

3d385ec

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

1f6c557

Merge branch 'master' into add-data-table

1baaa18

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

7685633

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

1ebf30a

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

d5f5047

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

869f054

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) comments clean up

cdf0a2b

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) row padding updated

07aa23b

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Custom Empty view a…

b1a76ff

…dded

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) action button props…

839ef68

… removed

balakrishnan-s5 requested a review from qroll August 18, 2023 04:59

balakrishnan-s5 added 2 commits August 18, 2023 19:46

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Custom Empty image

b504c3e

Merge branch 'master' into add-data-table

1890535

balakrishnan-s5 added 15 commits August 21, 2023 13:34

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

6937428

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

887414b

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

cab1ac6

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

7526c4a

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

0dde103

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

2d5e622

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Props updated

12e725b

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) comments clean up

519d0e5

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) row padding updated

eb22a71

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Custom Empty view a…

8babfc4

…dded

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) action button props…

aad2850

… removed

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Custom Empty image

c59e494

Merge branch 'add-data-table' of https://github.com/LifeSG/react-desi…

edb4495

…gn-system into add-data-table

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Sort Indicator tag …

895f9a6

…removed

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Custom Empty image

7de290e

qroll changed the base branch from data-table-long-lived to master August 21, 2023 08:36

qroll changed the base branch from master to data-table-long-lived August 21, 2023 08:36

qroll requested changes Aug 22, 2023

View reviewed changes

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Style Props fixes

230ca9c

keithtxw requested changes Aug 23, 2023

View reviewed changes

balakrishnan-s5 added 2 commits August 23, 2023 21:02

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) Style Props fixes

e826241

[BOOKINGSG-4436][BK] [DS] Table Component (Basic) PR comment fixes

3f9d32a

balakrishnan-s5 requested a review from qroll August 25, 2023 05:35

qroll reviewed Aug 28, 2023

View reviewed changes

SasithaRajapakasha added 2 commits August 28, 2023 12:30

[BOOKINGSG-4436][SR] Refactor code referencing PR comments

a07ebad

[BOOKINGSG-4436][SR] Add right padding to last cell of the row

f06de25

qroll approved these changes Aug 29, 2023

View reviewed changes

qroll merged commit cab1a80 into data-table-long-lived Aug 29, 2023
1 check passed

qroll deleted the add-data-table branch August 29, 2023 01:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add data table #281

Add data table #281

balakrishnan-s5 commented Aug 15, 2023 •

edited

Loading

qroll left a comment •

edited

Loading

qroll Aug 17, 2023

balakrishnan-s5 Aug 18, 2023 •

edited

Loading

keithtxw Aug 21, 2023

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 28, 2023

qroll Aug 22, 2023

keithtxw Aug 23, 2023

qroll Aug 22, 2023

keithtxw Aug 23, 2023

qroll left a comment

qroll Aug 28, 2023

qroll Aug 28, 2023

qroll Aug 28, 2023

qroll Aug 28, 2023

qroll Aug 28, 2023 •

edited

Loading

SasithaRajapakasha Aug 28, 2023

Add data table #281

Add data table #281

Conversation

balakrishnan-s5 commented Aug 15, 2023 • edited Loading

qroll left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

balakrishnan-s5 Aug 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qroll Aug 22, 2023 • edited Loading

Choose a reason for hiding this comment

qroll Aug 22, 2023 • edited Loading

Choose a reason for hiding this comment

qroll Aug 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qroll left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qroll Aug 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

balakrishnan-s5 commented Aug 15, 2023 •

edited

Loading

qroll left a comment •

edited

Loading

balakrishnan-s5 Aug 18, 2023 •

edited

Loading

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 22, 2023 •

edited

Loading

qroll Aug 28, 2023 •

edited

Loading