- Column titles must stand out from the entries.
- There should be a search bar that can filter on any property.
- You should be able to edit or delete rows in place.(There is no expectation of persistence. Edit and delete are expected to only happen in memory.)
- You need to implement pagination: Each page contains 10 rows. Buttons at the bottom allow you to jump to any page including special buttons for first page, previous page, next page and last page. Pagination must update based on search/filtering. If there are 25 records for example that match a search query, then pagination buttons should only go till 3.
- You should be able to select one or more rows. A selected row is highlighted with a grayish background color. Multiple selected rows can be deleted at once using the 'Delete Selected' button at the top right bin icon.
- Checkbox on the top left is a shortcut to select or deselect all displayed rows. This should only apply to the ten rows displayed in the current page, and not all 50 rows.
- Search box placeholder text should start with Search.
- Search icon/button should have class as search-icon OR trigger search on ENTER.
- Action element must be a button with a specific class name like edit, delete, save.
- Navigation elements must be a div/button, and should have class name as first-page, previous-page, next-page and last-page and page numbers should be mentioned accordingly.
- On clicking edit action in a row, it should be editable in the row itself.
- feel free to use any libraries.
- On executing, your application should be running successfully on deployed on vercel, netlify or any similar platform.
- after completing deployment. please submit here.
Note :
The users are sorted by id
field. There is no alphabetical sorting.
Request Type : GET
Endpoint : https://geektrust.s3-ap-southeast-1.amazonaws.com/adminui-problem/members.json
Sample Response :
[
{
"id": "1",
"name": "Aaron Miles",
"email": "[[email protected]](mailto:[email protected])",
"role": "member"
},
{
"id": "2",
"name": "Aishwarya Naik",
"email": "[[email protected]](mailto:[email protected])",
"role": "member"
},
{
"id": "3",
"name": "Arvind Kumar",
"email": "[[email protected]](mailto:[email protected])",
"role": "admin"
}
]
This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.