reactstrap#Table TypeScript Examples

Report: React.FC<Props> = ({ record }) => (
  <Table hover borderless size='sm' className={locals.table}>
    <thead>
      <tr>
        <th className={classNames('text-right', locals.name)}>#</th>
        <th className={locals.value}>Value</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {_.map(record, ([name, value, button], index) => (
        <tr key={index}>
          <td className={classNames('text-monospace', 'text-right')}>{name}</td>
          <td>{value}</td>
          <td>{button}</td>
        </tr>
      ))}
    </tbody>
  </Table>
)

History = () => {
  const history = useSelector((state) => state.report.history);
  const onDownload = () => {
    const encoded = JSON.stringify(history, null, 2);
    const link = document.createElement('a');
    link.href = URL.createObjectURL(new Blob([encoded], { type: 'application/json' }));
    link.download = makeDownloadFile();
    link.click();
  };
  return (
    <Row hidden={history.length === 0}>
      <h1>
        History{' '}
        <Button size='sm' color='link' onClick={onDownload}>
          Download
        </Button>
      </h1>
      <Table responsive borderless size='sm'>
        <thead>
          <tr>
            <th>#</th>
            <th>
              PM <sub>2.5</sub>
            </th>
          </tr>
        </thead>
        <tbody>
          {history.map(({ recordDate, pm25 }, index) => (
            <tr key={index}>
              <td>{recordDate?.toLocaleString()}</td>
              <td>{pm25}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Row>
  );
}

function OrderProducts({ productOrders, total, currency }: OrderProductsProps) {
  return (
    <div className="d-flex justify-content-center">
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>Product</th>
            <th className="text-right">Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {productOrders.map((productOrder, i) => (
            <tr key={i}>
              <th scope="row">{i + 1}</th>
              <td>{productOrder.product.name}</td>
              <td className="text-right">{productOrder.quantity}</td>
              <td>
                {productOrder.product.price / 1000000} {productOrder.product.currency}
              </td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <th />
            <th />
            <th className="text-right">Total:</th>
            <th>
              {total / 1000000} {currency}
            </th>
          </tr>
        </tfoot>
      </Table>
    </div>
  );
}

function PaymentEvents({ events }: PaymentEventsProps) {
  const { t } = useTranslation("order");
  return (
    <div className="d-flex justify-content-center">
      <Table>
        <thead>
          <tr>
            <th>Time</th>
            <th>Event</th>
          </tr>
        </thead>
        <tbody>
          {events.map((event, i) => (
            <tr key={i + 1}>
              <td>{event.timestamp.toLocaleString()}</td>
              <td>{t(`status.${event.eventType}`)}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

TutorOverview = () => {
    let tutorData = useSelector(selectTutorData);
    let dispatch = useDispatch();

    let [tooltipsOpen, setTooltipsOpen] = useState<Array<boolean>>([false, false, false, false, false, false, false]);
    let [weeklyAppointments, setWeeklyAppointments] = useState<Array<Appointment>>([]);
    let [tutorCourses, setTutorCourses] = useState<Array<Course>>([]);

    let daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    let currDate = useMemo(() => {return new Date()}, [])
    let currWeekMap = GetWeekMap(currDate);

    useEffect(() => {
        const getTutorAppointments = async () => {
            return (await api.GetTutorAppointments(tutorData.tutorId)).data;
        }

        getTutorAppointments().then(value => {
                setWeeklyAppointments(GetWeeklyAppointments(value, currDate));
                dispatch(tutorDataActions.setAppointment(value));
            }
        )
    }, [currDate, tutorData.tutorId, dispatch]);

    useEffect(() => {
        const getTutorCourses = async () => {
            return (await api.GetCoursesByTutorId(tutorData.tutorId)).data;
        }

        getTutorCourses().then(value => {
                setTutorCourses(value);
                dispatch(tutorDataActions.setCourses(value));
            }
        )
    }, [tutorData.tutorId, dispatch]);

    return (
        <Container className="overview" fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
                <div className="profile-text">Overview</div>
            </Row>

            <hr></hr>

            <Row>
                <Col className="courses-col" md={6}>
                    <Row className="title" style={{ marginTop: '25px'}}>
                        <h2>Courses</h2>
                    </Row>
                    <Container className="table-container">
                        <Table className="table-striped">
                            <tbody>
                                {tutorCourses.map((course, i) => {
                                        return (
                                            <tr key={i}>
                                                <td className="td-bold">{course.name}</td>
                                            </tr>
                                        );
                                    }
                                )}
                                {tutorCourses.length > 0 ? <></> :
                                    <tr><td className="td-bold">No courses found!<br/>Change which courses you plan to tutor from the Settings page.</td></tr>
                                }
                            </tbody>
                        </Table>
                    </Container>
                </Col>
                <Col className="weekly-sched-col" md={6}>
                    <Row className="title" style={{ marginTop: '25px'}}>
                        <h2>Weekly Tutoring Schedule</h2>
                    </Row>
                    <Container className="table-container">
                        <Table className="table-striped">
                            <tbody>
                                {Array.from(Array(7).keys()).map(day => {
                                    let date = currWeekMap.get(day);
                                    if(date !== undefined) {
                                        let date_time = BreakDownTime(date.toISOString());
                                        let daily_appointments = GetDailyAppointments(weeklyAppointments, date);
                                        let unconfirmed = UnconfirmedMeetingExists(daily_appointments);
                                        return (
                                            <tr key={day}>
                                                <td className="td-bold">{daysOfWeek[day]}, {date_time[0].split(",")[0]}</td>
                                                <td>
                                                    {daily_appointments.length > 0 ? daily_appointments.length : "No"} Meetings
                                                    {unconfirmed ? 
                                                    <span className="sched-pending">
                                                        <FontAwesomeIcon id={"pending-icon-"+day} icon={faQuestionCircle}/>
                                                        <Tooltip placement="top" isOpen={tooltipsOpen[day]} target={"pending-icon-"+day} toggle={() => {
                                                            let tooltipsOpenCopy = [...tooltipsOpen];
                                                            tooltipsOpenCopy[day] = !tooltipsOpen[day];
                                                            setTooltipsOpen(tooltipsOpenCopy); 
                                                        }}>
                                                            You have one or more unconfirmed meetings on this day.
                                                        </Tooltip>
                                                    </span> : <></>}
                                                </td>
                                            </tr>
                                        );
                                    } else {
                                        return <></>;
                                    }
                                })}
                            </tbody>
                        </Table>
                    </Container>
                </Col>
            </Row>

        </Container>
    );
}

SensorConsole: React.FC = () => {
  const dispatch = useDispatch();
  const connected = useSelector((state) => state.report.connected);
  const shuttingdown = useSelector((state) => state.report.shuttingdown);
  const latest = useSelector((state) => state.report.latest);
  const onConnect = async () => {
    if (connected) {
      await dispatch(disconnect());
    } else {
      await dispatch(requestDevice());
      await dispatch(connect());
    }
  };
  const onShutdown = () => dispatch(shutdown());
  const onReadHistory = () => dispatch(readHistory());
  return (
    <Container className={locals.container}>
      <Row>
        <ButtonGroup>
          <Button color={connected ? 'success' : 'primary'} onClick={onConnect}>
            {connected ? 'Disconnect' : 'Connect'}
          </Button>
          <Button disabled={!connected} color={connected ? 'danger' : undefined} onClick={onShutdown}>
            {shuttingdown ? 'Shutting down' : 'Shutdown'}
          </Button>
          <Button disabled={!connected} color={connected ? 'info' : undefined} onClick={onReadHistory}>
            Read history (one-time)
          </Button>
        </ButtonGroup>
      </Row>
      <Row>
        <h1>Real-time</h1>
        <Table className={locals.table} responsive borderless>
          <thead>
            <tr>
              <th className={locals.field}>#</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                PM <sub>2.5</sub>
              </td>
              <td className='text-monospace'>
                <FormattedPM25 value={latest.pm25} />
              </td>
            </tr>
            <tr>
              <td>Battery</td>
              <td>
                <Progress value={latest.batteryCapacity ?? 0}>
                  {latest.batteryCapacity ? `${latest.batteryCapacity}%` : 'N/A'} {latest.batteryCharging ? '(Charging)' : '(Discharge)'}
                </Progress>
              </td>
            </tr>
            <tr>
              <td>Record date</td>
              <td className='text-monospace'>
                <RecordDate value={latest.recordDate} />
              </td>
            </tr>
            <tr>
              <td>Runtime</td>
              <td className='text-monospace'>{latest.runTime ? prettyDuration(latest.runTime * 1000) : 'N/A'}</td>
            </tr>
            <tr>
              <td>Boot time</td>
              <td className='text-monospace'>{latest.bootTime ? prettyDuration(latest.bootTime * 1000) : 'N/A'}</td>
            </tr>
            <tr>
              <td>Measurement Interval</td>
              <td className='text-monospace'>
                <MeasurementInterval />
              </td>
            </tr>
            <tr>
              <td>Firmare Version</td>
              <td className='text-monospace'>{latest.version ?? 'N/A'}</td>
            </tr>
          </tbody>
        </Table>
      </Row>
      <History />
    </Container>
  );
}