Function row

packages/cli-v3/src/utilities/ink-table.tsx:278–330

* Constructs a Row element from the configuration.

(config: RowConfig)

 * Constructs a Row element from the configuration.
 */
function row<T extends ScalarDict>(config: RowConfig): (props: RowProps<T>) => React.JSX.Element {
  /* This is a component builder. We return a function. */

  const skeleton = config.skeleton;

  /* Row */
  return (props) => (
    <Box flexDirection="row">
      {/* Left */}
      <skeleton.component>{skeleton.left}</skeleton.component>
      {/* Data */}
      {...intersperse(
        (i) => {
          const key = `${props.key}-hseparator-${i}`;

          // The horizontal separator.
          return <skeleton.component key={key}>{skeleton.cross}</skeleton.component>;
        },

        // Values.
        props.columns.map((column, colI) => {
          // content
          const value = props.data[column.column];

          if (value == undefined || value == null) {
            const key = `${props.key}-empty-${column.key}`;

            return (
              <config.cell key={key} column={colI}>
                {skeleton.line.repeat(column.width)}
              </config.cell>
            );
          } else {
            const key = `${props.key}-cell-${column.key}`;

            // margins
            const ml = config.padding;
            const mr = column.width - String(value).length - config.padding;

            return (
              /* prettier-ignore */
              <config.cell key={key} column={colI}>
                {`${skeleton.line.repeat(ml)}${String(value)}${skeleton.line.repeat(mr)}`}
              </config.cell>
            );
          }
        })
      )}
      {/* Right */}
      <skeleton.component>{skeleton.right}</skeleton.component>
    </Box>
  );
}

/**
 * Renders the header of a table.