I need to make an editable header row in a table. I've tried manipulating the first row as a header row, while the real header is hidden. It works well, but I got a problem when turning it into a new page because the first row won't show up on the second page. Is there a possibility that I can customize and edit the table header row?
import { useState } from "react";
import { Table, Typography } from "antd";
import { data } from './data'
export const App = () => {
const [editableStr, setEditableStr] = useState(
"This is an editable text."
);
const columns = [
{
title: (
<Typography.Text editable={{ onChange: setEditableStr }}>
{editableStr}
</Typography.Text>
),
dataIndex: "name",
key: "name",
},
];
return <Table columns={columns} dataSource={data} />;
};