How Can i Customize Ant design table and pagination component?

Question

I want to customize and design table and pagination component.But how? Like i want to set table header color green. How can i do it? Or like in pagination component i want to set background color on page number. Is there any options to customize it? Thanks in advance.

I want to set ant design table components header color to green color how? Or how i edit like customize height,width,background color in table row,col

And how i customize pagination component. Like i want to set background color green on page numbers.

Answer 1

You can use ConfigProvider to change antd table property header color and cell padding for control height and you can control width from columns

import { Table, ConfigProvider } from "antd";

export default function App() {
  const dataSource = [
    {
      key: "1",
      name: "Mike",
      age: 32,
      address: "10 Downing Street",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
    },
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
      width: "300px",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
  ];
  return (
    <div className="App">
      <ConfigProvider
        theme={{
          components: {
            Table: {
              headerBg: "rgb(82, 196, 26)",
              colorBgContainer: "rgb(250, 140, 22)",
              padding: 13,
              paddingXS: 5,
              paddingXXS: 1,
            },
          },
        }}
      >
        <Table dataSource={dataSource} columns={columns} />;
      </ConfigProvider>
    </div>
  );
}

You can check sandbox example: https://codesandbox.io/p/sandbox/jolly-kilby-3qkz5h

Same way you can control pagination component

You can check ant design theme editor: https://ant.design/theme-editor