Table table component

Effect demonstration

1. Basic usage

 const columns = [
    {
      title: 'Role',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 100,
    },
    {
      title: 'Business module',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 100,
    },
    {
      title: 'IP address',
      dataIndex: 'loginIp',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 200,
    },
  ];
  const dataSource = [
    {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'SuperAdmin',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '',
      opType: 'Unban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'SuperAdmin',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: 'Ban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: 'SuperAdmin',
      opDepartmentId: 4,
      opDepartmentName: 'Root Department 1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: 'Operator username and password login',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'User login',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'SuperAdmin',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: 'Ban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'SuperAdmin',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '',
      opType: 'View black and white list',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Black and white list',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    },
  ];
<WingBlank>
  <Table columns={columns} dataSource={dataSource} height={300} />
</WingBlank>

2. Columns attribute

  const columns = [
   {
     title: 'Administrator',
      dataIndex: 'userInfo',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 100,
      flex: 2,
    },
    {
      title: 'role',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 50,
    },
    {
      title: 'Department',
      dataIndex: 'opDepartmentName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 20,
    },
    {
      title: 'Operation content',
      dataIndex: 'opContent',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: 'Business module',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: 'Operation time',
      dataIndex: 'createdAt',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'dateTimeRange',
    },
    {
      title: 'IP address',
      dataIndex: 'loginIp',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
  ];

  const dataSource = [
   {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '',
      opType: 'Unban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: 'Ban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 4,
      opDepartmentName: 'Root Department 1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: 'Operator username and password login',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'User login',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: 'Ban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '',
      opType: 'View black and white list',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Black and white list',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    }]
<WingBlank>
  <Table columns={columns} dataSource={data} height={300} />
</WingBlank>

3. Horizontal scrolling

   const columns = [
    {
      title: 'Administrator',
      dataIndex: 'userInfo',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 120,
      flex: 2,
    },
    {
      title: 'Kakuiro',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 120,
    },
    {
      title: 'Department',
      dataIndex: 'opDepartmentName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 120,
    },
    {
      title: 'Operation details',
      dataIndex: 'opContent',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: 'Business module',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: 'Operation time',
      dataIndex: 'createdAt',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'dateTimeRange',
      width: 300,
    },
    {
      title: 'IP address',
      dataIndex: 'loginIp',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 180,
    },
  ];

  const dataSource = [
    {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '',
      opType: 'Unban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'lw is',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: 'Ban member account, manga',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member Module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 4,
      opDepartmentName: 'Root Department 1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: 'Operator username and password login',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'User login',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'Lw is',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: 'Banning member accounts and comics',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Member module',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: 'Super administrator role',
      opDepartmentId: 22,
      opDepartmentName: 'Lw is',
      accountType: 1,
      opResources: '',
      opType: 'View list of black and white lists',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: 'Black and white list',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    },
  ];
<WingBlank>
  <Table columns={columns} dataSource={data}  height={300} />
</WingBlank>

4. Empty state

const columns = [
  {
    title: "Administrator",
    dataIndex: "userInfo",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
    width: 100,
    flex: 2,
  },
  {
    title: "Role",
    dataIndex: "roleName",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
    width: 50,
  },
  {
    title: "Department",
    dataIndex: "opDepartmentName",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
    width: 20,
  },
  {
    title: "Operation content",
    dataIndex: "opContent",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
  },
  {
    title: "Business module",
    dataIndex: "businessModule",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
  },
  {
    title: "Operating time",
    dataIndex: "createdAt",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "dateTimeRange",
  },
  {
    title: "IP address",
    dataIndex: "loginIp",
    align: "left",
    ellipsis: false,
    copyable: false,
    valueType: "text",
    hideInSearch: false,
  },
];

<WingBlank>
  <Table columns={columns} dataSource={[]} height={300} />
</WingBlank>;

API

Table component API

Properties	Required	Description	Type	Default Value
columns	true	Table column definitions	ColumnProps[]
dataSource	true	table data	[{ [key: string]: string }]
keyExtractor	true	Specifies the unique identification field of Table	(item: T, index: number) => string
headerStyle	false	Form header style	ViewStyle
rowStyle	false	Data row style	ViewStyle
onRefresh	false	Table drop-down refresh	() => void
onEndReached	false	Table pull-up loading	() => void
refreshing	false	refresh status	boolean	false
height	false	The height of the form (flex:1 if left blank, determined by the outer container)	number	deviceHeight
fixedHeader	false	Whether to fix the head	boolean	false
showHeader	false	Whether to display the header	boolean	false
emptyComponent	false	Empty state view	ReactElement

ColumnProps Properties

Properties	Required	Description	Type	Default Value
title	true	The column title of the form	string
dataIndex	true	key value of data	string
numberOfLines	false	Number of lines of text	number
ellipsisMode	false	Interception method after exceeding	head | middle | tail | clip
textAlign	false	Text alignment	center | left | right
width	false	Column width	number
renderText	false	Custom text	(item: any, column: ColumnProps) => string
render	false	Custom component	(item: any, column: ColumnProps) => ReactElement