Components Overview

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    valueType: 'text',
    search: true,
  },
  {
    title: 'Amount',
    dataIndex: 'amount',
    valueType: 'money',
    sorter: true,
  },
];

<ProLayout>
  <PageContainer>
    <ProCard>
      <ProTable columns={columns} />
    </ProCard>
  </PageContainer>
</ProLayout>

pnpm install @ant-design/pro-components

import { ProTable } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <ProTable
      columns={[
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age', valueType: 'digit' },
      ]}
      request={async () => {
        const data = await fetchData();
        return { data, success: true };
      }}
    />
  );
};

import { ProProvider } from '@ant-design/pro-components';

const App = () => {
  return (
    <ProProvider
      token={{ colorPrimary: '#1890ff' }}
      intl={enUSIntl}
    >
      <YourApp />
    </ProProvider>
  );
};