Table example

Hi,

I mentioned this on Twitter, but I’d really love to see an example of displaying tabular data with Ink.

I’ve figured out how to get tabular columns aligned using flexBasis/minWidth, but it’s a hack–I have to find the max string length of all table headers and data in table cells (for each column), then share this number among each cell in the column & the associated header.

e.g. (pseudo-jsx):

<!-- colSizes must be manually computed -->
<Box flexDirection="column">
  <Box>
    <Box flexBasis={colSize[0]}>HeaderA</Box>
    <Box flexBasis={colSize[1]}>HeaderB</Box>  
    <Box flexBasis={colSize[2]}>HeaderC</Box>  
  </Box>
  <Box>
    {rows.map(row => (
      <Box flexBasis={colSize[0]}>{row[0]}</Box>
      <Box flexBasis={colSize[1]}>{row[1]}</Box>
      <Box flexBasis={colSize[2]}>{row[2]}</Box>
    ))}
  </Box>
</Box>

My feeling is that <Box> is perhaps not well-suited to this task, but could be wrong–I’m inexperienced with both React and flexbox.

[SimenB]

One thing you could do is split up into columns manually, e.g. left, middle, right arrays, then render them into separate <Box flexDirection="column"> and wrap that whole thing into a <Box flexDirection="row">

import React from "react";
import { render, Box, Text, Color } from "ink";

const left = ["Rule", "cpu usage", "library-mismatch", "long-timeout"];
const middle = ["ID", "id 1", "id 2", "id 3"];
const right = [
  "Description",
  "description 1",
  "description 2",
  "description 3"
];

function App() {
  return (
    <Box flexDirection="row">
      <Box flexDirection="column">
        {left.map((e, i) => {
          if (i === 0) return <Text underline>{e}</Text>;

          return <Color blue>{e}</Color>;
        })}
      </Box>
      <Box flexDirection="column" paddingX={1}>
        {middle.map((e, i) => {
          if (i === 0) return <Text underline>{e}</Text>;

          return <Text>{e}</Text>;
        })}
      </Box>
      <Box flexDirection="column">
        {right.map((e, i) => {
          if (i === 0) return <Text underline>{e}</Text>;

          return (
            <Color yellow underline>
              {e}
            </Color>
          );
        })}
      </Box>
    </Box>
  );
}

render(<App />);

I don’t know if that’s something that should be encouraged, but it works at least 🙂

[SimenB]

CSS grid is probably far off: https://github.com/facebook/yoga/issues/867. It would be sweet though 😀