6 important features for Ant Design (antd) Table with Next.js [easy guide]

Ant design (antd) and Next.js

Antd is a React UI library with nice quality components to be used out of the box, like buttons, tabs, and table.

In this tutorial we are going to see how to add an antd table to our Next.js project and 6 important features to customize our table.

Add antd to our Next.js project

To start, let’s first add antd in our Next.js project, the steps are as follow:

• Navigate to your Next.js project

• Install antd, antd icons using npm i @ant-design/icons antd

• Create _app.js file under pages folder and import antd CSS file using import ‘antd/dist/antd.css’

your _app.js should look like

import '../styles/globals.css';
import 'antd/dist/antd.css';

function MyApp({Component, pageProps}) {
	return <Component {...pageProps} />;
}
export default MyApp;

Once the installation has finished, you will be able to see that the packages has been added to _package.json_

Customize Ant Design (antd) table

To use antd table in your project, you can choose between different styles offered by the framework, The API offers to populate columns, header and the table cells using a data source; you can also color specific lines, add pagination and so on.

Antd Table example in our Next.js project

To Create the Antd Table in our Next.js project, we are going to populate the header and data for it, and display it in a page.

First we are going to create our table component.

Create components folder under your Nextjs project and place the content below in a file called table.js

import {Table} from 'antd';
import homeStyles from '../styles/Home.module.css';
const TableComponent = ({posts, rowToColor}) => {
	const header = ['column1', 'column2', 'column3'];

	const columns = header.map((post) => {
		return {
			align: 'center',
			title: post,
			width: 200,
			dataIndex: post,
			key: post,
			render: (text, record) => {
				return {
					props: {
						style: {
							background:
								String(record[header[2]]) === rowToColor
									? 'green'
									: ''
						}
					},
					children: (
						<div className={homeStyles.text_style}>{text}</div>
					)
				};
			}
		};
	});
	const data = posts.map((post, index) => {
		return {
			key: index,
			[header[0]]: post[0],

			[header[1]]: post[1],
			[header[2]]: post[2]
		};
	});

	return (
		<Table
			columns={columns}
			dataSource={data}
			bordered
			pagination={false}
		/>
	);
};

export default TableComponent;

Next, create a page under pages folder and place the content below in a file called display.js

import TableComponent from '../components/table';
import homeStyles from '../styles/Home.module.css';

export default function Display() {
	const posts = [
		['rl11', 'rl12', 'rl13'],
		['rl21', 'rl22', 'rl23'],
		['r31', 'rl32', 'rl33'],
		['r41', 'rl42', 'rl43']
	];
	return (
		<div className={homeStyles.main}>
			{' '}
			<TableComponent posts={posts} />
		</div>
	);
}

The last step is to create our CSS file to apply some styles on the table

Create a file called Home.module.css under styles folder and copy this content

.main {
	min-height: 100vh;
	padding: 4rem 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.text_style {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: 200;
}

.headCenter {
	display: flex;
	flex-direction: column;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}

Now when you run npm run dev, and type in localhost:3000/display in your browser, you should be able to see the table display correctly like the picture below

Now let’s see the 6 most important features when using antd table

Change color of our antd table

It is possible to change the color of our antd table or to change row color based on a condition

To change the color of our table in antd, add a render method on the columns object and apply the color on the background attribute like the below

//define blue background color for cell
const columns = header.map((post) => {
	return {
		align: 'center',
		title: post,
		width: 200,
		dataIndex: post,
		key: post,
		render: (text, record) => {
			return {
				//will apply blue on each data cell of the table
				props: {
					style: {
						background: 'blue'
					}
				},
				children: <div className={homeStyles.text_style}>{text}</div>
			};
		}
	};
});

This will apply blue color on each data cell of the table.

To color cell based on a condition, we can check on specific data and color cell accordingly.

For example, to color a row if cell rl33, apply background: String(record[header2]) === rowToColor ? “green” : “”,

Change font size

To change font size in the antd data table, apply a className to the text being displayed, and change the class font size property like below

.text_style {
	font-size: 1rem;
}

Align items

It is possible to align items by placing them on left, on center or right by using the property align in the column object.

To align items on center

const columns = header.map((post) => {
    return {
      align: "center",
    }
    //copy the remaining lines

    <Table columns={columns} dataSource={data} />

Pagination

By default, Antd table has 10 rows per page, if you wish to have less or more items on a page, use pagination attribute on the Table, and change the defaultPageSize like below

<Table
	columns={columns}
	dataSource={data}
	bordered
	pagination={{defaultPageSize: 3}}
/>

Here we have defined 3 rows per page, and you will be able to see the page number on the bottom right of the table.

Table title

You can add a title to your table also, for that use the attribute title and assign to it your function to display the title

<Table
	columns={columns}
	dataSource={data}
	bordered
	pagination={{defaultPageSize: 4}}
	title={() => <div className={homeStyles.headCenter}>Table title</div>}
/>

Here we place the title inside a div and we apply styles on it as we want.

Table border

antd table are border less by default, to add border to the table use

<Table columns={columns} dataSource={data} bordered />

Conclusion

We have seen how to use Ant design (antd) with Next.js project, how to use antd tables, center text, change font size, add table title, apply borders, and pagination.

Though antd components are great, they do not offer responsive components, if you are intersted in a responsive table component out of the box, i recommend to check my article about material ui table in nextjs