Data Table
Search
Let people search the table. The term lives in the URL, so the API does the heavy lifting.
Preview
| Role | ||
|---|---|---|
| Ada Hopper | ada.hopper@vitnode.com | Admin |
| Ada Lovelace | ada.lovelace@vitnode.com | Admin |
| Ada Turing | ada.turing@vitnode.com | Admin |
| Alan Johnson | alan.johnson@vitnode.com | Editor |
| Alan Ritchie | alan.ritchie@vitnode.com | Editor |
| Alan Thompson | alan.thompson@vitnode.com | Editor |
| Barbara Hamilton | barbara.hamilton@vitnode.com | Admin |
| Barbara Johnson | barbara.johnson@vitnode.com | Admin |
| Barbara Ritchie | barbara.ritchie@vitnode.com | Admin |
| Dennis Hopper | dennis.hopper@vitnode.com | Editor |
Showing 1–10 of 36
Usage
<ContentDataTable
id="users-table"
search
searchPlaceholder="Search users..."
columns={columns}
edges={data.edges}
pageInfo={data.pageInfo}
order={{ defaultOrder: { column: 'name', order: 'asc' } }}
/>The input writes ?search= to the URL 500ms after typing stops. Terms shorter
than 3 characters clear it. Your route then loads the matching rows.
Configure the API route
search only renders the input. The API route decides which columns are
searched. See the Search guide.