tables example repo #91
Conversation
There was a problem hiding this comment.
Adding search functionality has introduced a few interesting edge cases, and I'm unsure if we want to address them here. My first question is:
- Do we need or want paginated search in this example?
If not, we could consider removing pagination entirely, which might simplify things.
Assuming that paginated search is a crucial part of this example, we need to handle the following:
-
Paginator State Matching Available Data:
The paginator must reflect the search results accurately. For instance:- If the search returns only one item, the paginator should display a single page, and the navigation buttons should be disabled.
-
Handling No Results:
If the search yields no results, we should display an empty state indicator to inform users.
| )); | ||
|
|
||
| const TableExampleCard = () => { | ||
| const tableData = [ |
There was a problem hiding this comment.
let's move tableData outside of the component
| @@ -0,0 +1,17 @@ | |||
| # HubSpot Getting Started Project Template | |||
There was a problem hiding this comment.
Same comment as the other PR re: getting Product & UX content for this README so it matches other examples
| const [search, setSearch] = useState(""); | ||
| const [data, setData] = useState(tableData); | ||
|
|
||
| // Search for both name and publish status match, case insensitive |
There was a problem hiding this comment.
nit: indentation
| // Search for both name and publish status match, case insensitive | |
| // Search for both name and publish status match, case insensitive |
| <Heading>Table Example</Heading> | ||
| <Text> | ||
| Tables can be tricky, especially as they grow in complexity and size. | ||
| This is an example of how to input, buttons, and scrolling can be |
There was a problem hiding this comment.
nit: typo?
| This is an example of how to input, buttons, and scrolling can be | |
| This is an example of how input, buttons, and scrolling can be |
| </Text> | ||
|
|
||
| <Flex direction="row" | ||
| > |
There was a problem hiding this comment.
nit: line-wrapping issue
| /> | ||
| <Flex | ||
| justify="end" | ||
| > |
There was a problem hiding this comment.
I'd recommend getting your prettier config setup and setting your editor to auto-fix on save so you don't have to worry about spacing and indentation like this
Issue
Goal is to create a new Table(s) example for the sample repo I've forked. Did a bit more than UI and added actual search functionality for Name and Publish Status to filter the table. Also, added pagination and guide buttons to the table.
Things to highlight in this example from product and design:
TableCellandTableHead(example here)Screenshot:
