jurajkocan / antdresponsivetable

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.

antdresponsivetable's Issues

In mobile veiw data is becoming undefined.

on large screen data is ok. whereas on smaller screen data is not showing

does not return second parameter in render function

{ title: 'description', dataIndex: 'description', key: 'description', render: (desc, record) => <p onClick={() => clickHandler(record._id)}>{desc}</p>, },

you never return record

Pagination Not Working.

https://codesandbox.io/s/great-fog-cnsi4?fontsize=14&hidenavigation=1&theme=dark

ClassName for table header and table data

Please add className for table header and table data as I want to customize styling

[Bug?] JSX element type 'Table' does not have any construct or call signatures.

Hi, I got this error while trying to use this project. it is exactly the same code as shown in the example section of README.md.

It says JSX element type 'Table' does not have any construct or call signatures..
Any clue will be appreciated.