BaseTable 基础表格

使用场景

通用的基础表格。该组件在开源表格组件 ali-react-table 的基础上进行了样式上的调整，用法详见开源文档。

日常业务推荐使用封装程度更高的 进阶表格组件.

用法

公司名称	金额	金融机构	申请人	操作

阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨杭州分行	James Collier	编辑 删除 更多
阿里巴巴网络技术有限公司	600,000.00(CNY)	建设银行丨未来科技城	Philip Burke	编辑 删除 更多
阿里巴巴网络技术有限公司	600,000.00(CNY)	交通银行丨浙大路支行	Wesley Cruz	编辑 删除 更多
阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨庆春路支行	Billy Horton	编辑 删除 更多
阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨文一路分行	Paul Tran	编辑 删除 更多
阿里巴巴网络技术有限公司	600,000.00(CNY)	农业银行丨杭州分行	Anna Poole	编辑 删除 更多

noInline

const dataSource1 = [ { id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' }, { id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' }, { id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' }, { id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' }, { id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' }, { id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' }, ]; const OperationsDiv = styled.div` display: flex; height: 20px; align-items: center; .item { height: 20px; cursor: pointer; color: #3858cf; display: flex; align-items: center; &.danger { color: #eb4141; } } .sep { height: 10px; width: 1px; margin-left: 12px; margin-right: 12px; background: #eeeeee; } `; function CaretDown(props) { return ( <svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" {...props} > <path d="M24 12L16 22 8 12z" /> </svg> ); } function renderOptions() { return ( <OperationsDiv> <div className="item">编辑</div> <div className="sep" /> <div className="item danger">删除</div> <div className="sep" /> <Popup target={ <div className="item"> 更多 <CaretDown style={{ color: '#A6A6A6' }} /> </div> } > <Menu autoDismissPopup dataSource={'1,2,3,4'.split(',').map((n) => ({ key: `Option ${n}`, label: `Option ${n}`, }))} /> </Popup> </OperationsDiv> ); } const operationCol = { lock: true, name: '操作', render: renderOptions, width: 200 }; const columns1 = [ { code: 'name', width: 220, name: '公司名称' }, { code: 'amount', width: 160, align: 'right', name: '金额' }, { code: 'dept', width: 160, name: '金融机构' }, { code: 'applier', width: 120, name: '申请人' }, operationCol, ]; function Basic() { return <BaseTable dataSource={dataSource1} columns={columns1} />; } render(<Basic />)

const dataSource1 = [
  { id: '1', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨杭州分行', applier: 'James Collier' },
  { id: '2', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '建设银行丨未来科技城', applier: 'Philip Burke' },
  { id: '3', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '交通银行丨浙大路支行', applier: 'Wesley Cruz' },
  { id: '4', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨庆春路支行', applier: 'Billy Horton' },
  { id: '5', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '招商银行丨文一路分行', applier: 'Paul Tran' },
  { id: '6', name: '阿里巴巴网络技术有限公司', amount: '600,000.00(CNY)', dept: '农业银行丨杭州分行', applier: 'Anna Poole' },
];

const OperationsDiv = styled.div`
  display: flex;
  height: 20px;
  align-items: center;

  .item {
    height: 20px;
    cursor: pointer;
    color: #3858cf;
    display: flex;
    align-items: center;

    &.danger {
      color: #eb4141;
    }
  }

  .sep {
    height: 10px;
    width: 1px;
    margin-left: 12px;
    margin-right: 12px;
    background: #eeeeee;
  }
`;

function CaretDown(props) {
  return (
    <svg
      focusable="false"
      preserveAspectRatio="xMidYMid meet"
      fill="currentColor"
      width="16"
      height="16"
      viewBox="0 0 32 32"
      {...props}
    >
      <path d="M24 12L16 22 8 12z" />
    </svg>
  );
}

function renderOptions() {
  return (
    <OperationsDiv>
      <div className="item">编辑</div>
      <div className="sep" />
      <div className="item danger">删除</div>
      <div className="sep" />

      <Popup
        target={
          <div className="item">
            更多
            <CaretDown style={{ color: '#A6A6A6' }} />
          </div>
        }
      >
        <Menu
          autoDismissPopup
          dataSource={'1,2,3,4'.split(',').map((n) => ({
            key: `Option ${n}`,
            label: `Option ${n}`,
          }))}
        />
      </Popup>
    </OperationsDiv>
  );
}

const operationCol = { lock: true, name: '操作', render: renderOptions, width: 200 };

const columns1 = [
  { code: 'name', width: 220, name: '公司名称' },
  { code: 'amount', width: 160, align: 'right', name: '金额' },
  { code: 'dept', width: 160, name: '金融机构' },
  { code: 'applier', width: 120, name: '申请人' },
  operationCol,
];

function Basic() {
  return <BaseTable dataSource={dataSource1} columns={columns1} />;
}

render(<Basic />)