@jswork/react-ant-table v1.0.1

react-ant-table

Antd table.

installation

npm install -S @jswork/react-ant-table

usage

1. import css

   @import "~@jswork/react-ant-table/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-ant-table/dist/style.scss";
   
   // customize your styles:
   $react-ant-table-options: ()

2. import js

   import React, { useState, useEffect } from 'react';
   import ReactAntTable from '@jswork/react-ant-table';
   import '../../src/components/style.scss';
   import styled from 'styled-components';
   import nxColumn from '@jswork/next-ant-column';
   const Container = styled.div`
     width: 80%;
     margin: 30px auto 0;
     height: 100vh;
     border: 1px solid #ccc;
   `;
   
   export default (props: any) => {
     const [dataSource, setDataSource] = useState([]);
     const columns = [nxColumn('ID', 'id'), nxColumn('Title', 'title'), nxColumn('UserId', 'userId')];
   
     useEffect(() => {
       fetch('https://jsonplaceholder.typicode.com/posts')
         .then((r) => r.json())
         .then((res) => {
           setDataSource(res);
         });
     }, []);
   
     return (
       <Container>
         <ReactAntTable
           columns={columns}
           dataSource={dataSource}
           pagination={{ pageSize: 15 }}
           rowKey="id"
         />
       </Container>
     );
   };

preview

• https://afeiship.github.io/react-ant-table/

license

Code released under the MIT license.