feat(table): add custom input to header columns #3767

EKong-IBM · 2023-04-06T19:26:07Z

GRAPHITE-58370

Summary

Adding property to allow custom column inputs for Table. This will also allow for extended filters to be added.

Change List (commits, features, bugs, etc)

FilterHeaderRow and testing file. Added property to TableHead.

Acceptance Test (how to verify the PR)

When creating a table, set customInput to an element and it should display that element instead of the current multiselect, combobox, or textinput.

Things to look for during review

Make sure all references to iot or bx class prefix is using the prefix variable
(React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
UI should be checked in RTL mode to ensure the proper handling of layout and text.
All strings should be translatable.
The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
Unit test should be written and should have a coverage of 90% or higher in all areas.
All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
Changes or new components should either write new or update existing documentation.
PR should link and close out an existing issue

#58370

netlify · 2023-04-06T19:32:32Z

✅ Deploy Preview for carbon-addons-iot-react ready!

Name	Link
🔨 Latest commit	`0d6c89f`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-addons-iot-react/deploys/6446cd273079e80008b2b0b5
😎 Deploy Preview	https://deploy-preview-3767--carbon-addons-iot-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

davidicus

You are almost there. Just a few more tweaks and then the addition to the Table story to showcase this new feature as well as adding it to the docs

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.test.jsx

#58370

davidicus · 2023-04-24T19:19:41Z

packages/react/src/components/Table/TableHead/TableHead.jsx

@@ -669,6 +669,7 @@ const TableHead = ({
            isFilterable: !isNil(column.filter),
            isMultiselect: column.filter?.isMultiselect,
            width: column.width,
+            customInput: column?.customInput,


I would imagine we would want this to be part of the filter object. Like above on line 670,

Ok that seems to have worked. Thanks 👍

davidicus · 2023-04-24T19:40:37Z

packages/react/src/components/Table/Table.story.helpers.jsx

+  {
+    id: 'customInput',
+    name: 'Custom Input',
+    customInput: <div>customInput</div>,


This will not render without the filter property present.

I believe we need to change the proptype of this new property. We should pass in an elementType so we can render the component in the FilterhaderRow and pass a ref. This will resolve the issue with the test on StatefulTable. You can also look into the stateful table's code to see where it using the ref and put a condition in there to avoid test failure.

Either that or we need to clone the Element we bring in and add a ref.

EKong-IBM · 2023-04-27T12:31:44Z

I wasn't quite able to resolve the unit test issues, but I had followed David's review and the display seemed to work properly.

packages/react/src/components/Table/TableHead/TableHead.jsx
customInput: column?.customInput, -> customInput: column.filter?.customInput,

packages/react/src/components/Table/Table.story.helpers.jsx
customInput: <div>customInput</div>, -> filter: { customInput: <div>customInput</div> },

davidicus

Some more comments on clarity and how you are able to fix that test issue. I did test that the failure comes from not having a ref on the filter. So changing to elementType will resolve it and render the custom input that we want. We just need to find out if that works for the needed use case in Graphite. Otherwise, you can try to clone the element and see if that works.

davidicus · 2023-04-27T14:57:50Z

packages/react/src/components/Table/Table.story.helpers.jsx

+  {
+    id: 'customInput',
+    name: 'Custom Input',
+    customInput: <div>customInput</div>,


I believe we need to change the proptype of this new property. We should pass in an elementType so we can render the component in the FilterhaderRow and pass a ref. This will resolve the issue with the test on StatefulTable. You can also look into the stateful table's code to see where it using the ref and put a condition in there to avoid test failure.

Either that or we need to clone the Element we bring in and add a ref.

davidicus · 2023-04-27T14:58:30Z

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx

@@ -60,6 +60,7 @@ class FilterHeaderRow extends Component {
        ),
        /** if isMultiselect and isFilterable are true, the table is filtered based on a multiselect */
        isMultiselect: PropTypes.bool,
+        customInput: PropTypes.element,


I suspect we need this to be an elementType so we can pass in a ref.

Suggested change

customInput: PropTypes.element,

customInput: PropTypes. elementType,

We may need to define an onChange handler in the filter object.
OR,
If we keep as an element we can clone the component and add the ref that way. That may be preferable.

davidicus · 2023-04-27T15:00:29Z

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx

@@ -361,6 +362,8 @@ class FilterHeaderRow extends Component {
          const headerContent =
            column.isFilterable !== undefined && !column.isFilterable ? (
              <div />
+            ) : column.customInput !== undefined ? (
+              column.customInput


If we do change this to be an elementType you can render like so:

Where you define a local variable like const CustomInput = column.customInput

davidicus · 2023-04-27T15:10:24Z

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.test.jsx

@@ -1034,4 +1034,16 @@ describe('FilterHeaderRow', () => {
      expect(screen.getByTestId('filter-row-icon')).toBeVisible();
    });
  });
+
+  it('should display custom input when not undefined', () => {


We should add a test where we use the custom input to ensure that we are able to filter data in the table.

davidicus · 2023-04-27T15:11:35Z

packages/react/src/components/Table/TableHead/TableHead.jsx

@@ -669,6 +669,7 @@ const TableHead = ({
            isFilterable: !isNil(column.filter),
            isMultiselect: column.filter?.isMultiselect,
            width: column.width,
+            customInput: column?.customInput,


Suggested change

customInput: column?.customInput,

customInput: column.filter?.customInput,

sls-ca

@erzhan-temir-mamyrov @JordanWSmith15 Is this PR still valid?

erzhan-temir-mamyrov · 2023-05-30T11:55:06Z

@sls-ca I am not sure. I can follow up with Graphite ticket and resolve merge conflicts.

JordanWSmith15 · 2023-06-14T16:09:39Z

@sls-ca it is needed still, it just isn't high priority any more. Let's let it sit for a while, and some other dev will pick it up and finish it.

feat(table): add custom input to header columns

39d35a3

#58370

EKong-IBM requested review from davidicus and jessieyan as code owners April 6, 2023 19:26

davidicus requested a review from erzhan-temir-mamyrov April 13, 2023 18:03

davidicus requested changes Apr 14, 2023

View reviewed changes

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx Outdated Show resolved Hide resolved

packages/react/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.test.jsx Outdated Show resolved Hide resolved

davidicus added the status: waiting for author's response 💬 label Apr 14, 2023

feat(table): table storybook custom input

0d6c89f

#58370

EKong-IBM requested a review from sls-ca as a code owner April 24, 2023 18:40

davidicus reviewed Apr 24, 2023

View reviewed changes

davidicus requested changes Apr 27, 2023

View reviewed changes

davidicus added the status: merge conflicts 🚫 label Apr 27, 2023

sls-ca reviewed May 30, 2023

View reviewed changes

erzhan-temir-mamyrov self-assigned this May 30, 2023

herleraja changed the base branch from next to 2.x.x January 7, 2025 12:38

herleraja self-requested a review as a code owner January 7, 2025 12:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(table): add custom input to header columns #3767

feat(table): add custom input to header columns #3767

EKong-IBM commented Apr 6, 2023

netlify bot commented Apr 6, 2023 •

edited

Loading

davidicus left a comment

davidicus Apr 24, 2023

EKong-IBM Apr 24, 2023

davidicus Apr 24, 2023

davidicus Apr 27, 2023

EKong-IBM commented Apr 27, 2023

davidicus left a comment

davidicus Apr 27, 2023

davidicus Apr 27, 2023

davidicus Apr 27, 2023

davidicus Apr 27, 2023

davidicus Apr 27, 2023

davidicus Apr 27, 2023

sls-ca left a comment

erzhan-temir-mamyrov commented May 30, 2023

JordanWSmith15 commented Jun 14, 2023

	customInput: PropTypes.element,
	customInput: PropTypes. elementType,

	customInput: column?.customInput,
	customInput: column.filter?.customInput,

feat(table): add custom input to header columns #3767

Are you sure you want to change the base?

feat(table): add custom input to header columns #3767

Conversation

EKong-IBM commented Apr 6, 2023

netlify bot commented Apr 6, 2023 • edited Loading

✅ Deploy Preview for carbon-addons-iot-react ready!

davidicus 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

EKong-IBM commented Apr 27, 2023

davidicus 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sls-ca left a comment

Choose a reason for hiding this comment

erzhan-temir-mamyrov commented May 30, 2023

JordanWSmith15 commented Jun 14, 2023

netlify bot commented Apr 6, 2023 •

edited

Loading