This is an example of very basic table component for NextJs. This demonstrates how to:

• create a component
• use a component
• pass data to OnClick functions (on row or column click)
• use simple get axios JSON API
• use https://jsonplaceholder.typicode.com fake online REST API for testing
• inline style jsx

• Choose which columns to display
• Choose which columns to make sortable
• No pagination
• Specify which OnClick Function to execute for column header or row click

It started with the question, how to pass a row object in a table to onClick handler in NextJs? Couple of options :

<tr onClick={this.handleTheClick}>

Above code won't pass row object to handleTheClick.

But if you do something like this:

<tr onClick={() => this.handleTheClick(row)}> 

Then on every render of row a new function would be created.

Other option is

<tr onClick={this.handleTheClick} data-item='{row}'>

and then in handleTheClick function, get data-item like:

handleTheClick (e) {
    const row = e.target.getAttribute('data-item');
}

The better approach is what is used in this BasicTable component. Create a separate component and pass the row object as a property of Table component Look at BasicTable, TableHeader and TableBody components

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

• External SCSS
• Pagination

Contributions are welcome