如何在React DataTable中显示条件判断数据？

你可以通过两种方式实现需求：

方法一：直接在列配置中使用三元运算符 #

不需要修改原始数据，直接在columns的selector里根据check_in字段判断显示内容：

export default function Table() {
  const [data, setData] = useState([]);

  const columns = [
    {
      name: 'name',
      selector: row => row.name,
    },
    {
      name: 'email_id',
      selector: row => row.email_id,
    },
    {
      name: 'Status',
      // 直接通过check_in字段判断显示内容
      selector: row => row.check_in !== null ? 'present' : 'absent'
    }
  ];

  useEffect(() => {
    axios.get("view")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);  

  return (
    <DataTable columns={columns} data={data} />
  )
}

方法二：预处理数据添加Status字段 #

如果后续需要复用Status字段，可以在获取数据后给每条数据新增该字段：

export default function Table() {
  const [data, setData] = useState([]);

  const columns = [
    {
      name: 'name',
      selector: row => row.name,
    },
    {
      name: 'email_id',
      selector: row => row.email_id,
    },
    {
      name: 'Status',
      selector: row => row.Status
    }
  ];

  useEffect(() => {
    axios.get("view")
      .then((response) => {
        // 预处理数据，添加Status字段
        const processedData = response.data.map(row => ({
          ...row,
          Status: row.check_in !== null ? 'present' : 'absent'
        }));
        setData(processedData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);  

  return (
    <DataTable columns={columns} data={data} />
  )
}

两种方法都能实现你想要的效果，按需选择即可。

内容的提问来源于stack exchange，提问作者Mustafa_Dahodwala 19_13