Function QuickTable

frontend/src/utils/tsx-utils.tsx:135–193

(
  data:
    | { key: React.ReactNode; value: React.ReactNode }[]
    | { [key: string]: React.ReactNode }
    | [React.ReactNode, React.ReactNode][],
  options?: QuickTableOptions
)

): JSX.Element;

export function QuickTable(
  data:
    | { key: React.ReactNode; value: React.ReactNode }[]
    | { [key: string]: React.ReactNode }
    | [React.ReactNode, React.ReactNode][],
  options?: QuickTableOptions
): JSX.Element {
  let entries: { key: React.ReactNode; value: React.ReactNode }[];

  // plain object?
  if (typeof data === 'object' && !Array.isArray(data)) {
    // Convert to array of key value objects
    entries = [];
    for (const [k, v] of Object.entries(data)) {
      entries.push({ key: k, value: v });
    }
  }
  // array of [any, any] ?
  else if (Array.isArray(data) && data.length > 0 && Array.isArray(data[0])) {
    // Convert to array of key-value objects
    entries = (data as [React.ReactNode, React.ReactNode][]).map((ar) => ({ key: ar[0], value: ar[1] }));
  }
  // already correct? array of { key:any, value:any }
  else {
    // Cast to correct type directly
    entries = data as { key: React.ReactNode; value: React.ReactNode }[];
  }

  const o = Object.assign({} as QuickTableOptions, DefaultQuickTableOptions, options);

  const showVerticalGutter = (typeof o.gapHeight === 'number' && o.gapHeight > 0) || typeof o.gapHeight === 'string';
  const classNames = [o.tableClassName, 'quickTable'].joinStr(' ');

  return (
    <table className={classNames} style={o.tableStyle}>
      <tbody>
        {entries.map((obj, i) => (
          <React.Fragment key={`${toSafeString(obj.key)}-${i}`}>
            <tr>
              <td className="keyCell" style={{ textAlign: o.keyAlign, ...o.keyStyle }}>
                {React.isValidElement(obj.key) ? obj.key : toSafeString(obj.key)}
              </td>
              <td style={{ minWidth: '0px', width: o.gapWidth, padding: '0px' }} />
              <td className="valueCell" style={{ textAlign: o.valueAlign, ...o.valueStyle }}>
                {React.isValidElement(obj.value) ? obj.value : toSafeString(obj.value)}
              </td>
            </tr>

            {showVerticalGutter && i < entries.length - 1 && (
              <tr>
                <td style={{ padding: 0, paddingBottom: o.gapHeight }} />
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );