D
D
Daniel161rus2019-06-24 21:53:36
React
Daniel161rus, 2019-06-24 21:53:36

How to check the value of a field and display it in a table?

You need to take the value of the check field, check it, if true, display the text 'At work' in the cell, if false - 'Absent'.

import React, { Component } from 'react';
import { Table,Tag,Spin } from 'antd';

import { withFirebase } from '../Firebase';

class TableOffice extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      users: [],
    };
  }
  

  componentDidMount() {
    this.setState({ loading: true });

    this.props.firebase.users().on('value', snapshot => {
      const usersObject = snapshot.val();
      const dataSource = Object.keys(usersObject).map(key => ({
        ...usersObject[key],
        uid: key,
      }));
      this.setState({
        users: dataSource,
        loading: false,
      });
    });
  }

  componentWillUnmount() {
    this.props.firebase.users().off();
  }

  render(){

    const { users, loading } = this.state;

    const columns = [
      {
        title: 'Имя',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Фамилия',
        dataIndex: 'surname',
        key: 'surname',
      },
      {
        title: 'E-mail',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Телефон',
        dataIndex: 'phone',
        key: 'phone',
      },
   ////////////Сюда/////////////
      {
        title: 'Статус',
        key: 'check',
        dataIndex: 'check',
      },
    ////////////////////////  
      {
        title: 'Действие',
        dataIndex: 'action',
      },
    ];

    return(
      <div>
        {loading && <Spin size="large" /> }
        <Table
        columns={columns}
        dataSource={users}
         />
      </div>
    );
  }
}

export default withFirebase(TableOffice);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-06-24
@Daniil161rus

Add the render property to the check column object:

{
  title: 'Статус',
  key: 'check',
  dataIndex: 'check',
  render: status => status ? 'На работе' : 'Отсутствует',
},

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question