Table filter best practice - datepicker (Office hours: Oct 13, 2020)

[sang-yeo]

Hello there, I'm working on Twilio Debugger page and like to know what's the best way to use a datepicker(console component) as a filter on Paste component. Added details in the signup form.

[richbachman]

Hi @sang-yeo.

Thanks for posting this here. Is there anything in the research or mockups that can't be shared publicly? If not I'll add those links here, so the information is more visible. Thanks.

[sang-yeo]

Cool. I applied the feedback I've got from the office hour to the concept. I'd like to get feedback on...

1. Overall interaction using the new datepicker
2. Do we need to put background color on the new table header?
3. Table footer treatment for dynamic search result - we have a background color on every other row how does this interact with footer when colored row is above the table footer?

[serifluous]

Overall interaction using the new datepicker

Overall, this seems fine to me. I wonder if, even if a customer selects a preset value on the "Date range field" like "Last 30 days", a customer might still want to see the date-time picker to fine-tune the time range selection? Just a thought—you'll probably get a better sense of this from testing.

Do we need to put background color on the new table header?

Nope, not yet. Follow the component style you see on the doc site for now. Once we make design updates to it, we'll give it to you through the symbol and your engineering team will get it through component updates.

Table footer treatment for dynamic search result - we have a background color on every other row how does this interact with footer when colored row is above the table footer?

Can you say a bit more about what you need to put in a Table Footer? Is it just pagination?

---

Other questions/feedback:

1. One thing that's still throwing me off a little is the "Group by" form field. Is it filtering or sorting? Does it affect both the Table and the Graph?
2. For the "Alert type" form field, have you tried this using checkboxes? Since you're allowing customers to select 1 of 2 alert types, or both alert types, checkboxes could make that choice a little clearer.
3. On the Request Inspector modal, I'd recommend moving the "Go to event details page" link into the Modal Body. Footer actions usually affect interactions on the modal itself, like moving forward or backward or closing the modal.
4. On the Request Inspector, would it make sense to change the "Request" and "Response" disclosures to headings, so that you can avoid nesting disclosures?

[sang-yeo]

Thank you @serifluous

Can you say a bit more about what you need to put in a Table Footer? Is it just pagination?<

Kind of... it's about footer background color, I don't see any background color info on the Paste doc so I assume no color for the table footer correct?

One thing that's still throwing me off a little is the "Group by" form field. Is it filtering or sorting? Does it affect both the Table and the Graph?<

It's a sorting and it will affect both. I've been updating the concept. You can see it here

For the "Alert type" form field, have you tried this using checkboxes? Since you're allowing customers to select 1 of 2 alert types, or both alert types, checkboxes could make that choice a little clearer<

Current Debugger uses the checkbox option and it allows user to unselect both types which is null

On the Request Inspector, would it make sense to change the "Request" and "Response" disclosures to headings, so that you can avoid nesting disclosures?<

Could you tell me more? If I make the "request" and "response to headings but keep the rest of them in multiple disclosures or one?

[serifluous]

Kind of... it's about footer background color, I don't see any background color info on the Paste doc so I assume no color for the table footer correct?

Correct, no color for Table Footer right now. However, if you need Pagination, we're going to be kicking off work for that soon and can give you some better guidance for where that should be placed and how that should look in a few weeks.

Current Debugger uses the checkbox option and it allows user to unselect both types which is null

👍 Filter groups are on our roadmap, so this use case is good to know for us.

Could you tell me more? If I make the "request" and "response to headings but keep the rest of them in multiple disclosures or one?

Yep, keep the rest of them in multiple disclosures.