ant-responsive-table
v1.0.8
Published
responsive ant design table
Downloads
661
Maintainers
Readme
AntdResponsiveTable
this project is in "Beta" version... but at least will create somehow more responsive table.
Responsive antd table. this component will render classic antd table with full support of anything antd table can do.
On mobileBreakPoint will render custom html for better responsive design. currently limited only for some props.
install
npm i ant-responsive-table
usage
import Table from "ant-responsive-table";
const dataSource = [
{
key: "1",
name: "Mike",
age: 32,
address: "10 Downing Street"
},
{
key: "2",
name: "John",
age: 42,
address: "10 Downing Street"
}
];
const App: React.FC = () => {
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",
showOnResponse: true,
showOnDesktop: true
},
{
title: "Age",
dataIndex: "age",
key: "age",
showOnResponse: true,
showOnDesktop: true
},
{
title: "Address",
dataIndex: "address",
key: "address",
showOnResponse: true,
showOnDesktop: true
}
];
return (
<div>
<Table
antTableProps={{
showHeader: true,
columns,
dataSource,
pagination: false
}}
mobileBreakPoint={768}
/>
</div>
);
};
Props:
mobileBreakPoint
- breakpoint in px when should table render with "custom design"
antTableProps
- all props from antd table with 2 additional required pops in columns:
showOnResponse: boolean
showOnDesktop: boolean
- determine if column is rendered on desktop and response
currently supported props from ant table on responsive design:
- pagination
- onRow
- columns.render
- columns.title
read more about antd table here
this readme sucks. feel free to contribute on github.