Data grid displays editable information in a grid-like format of rows and columns

Grid column definitions

See {@link https://sema4ai-design-system.pages.dev/datagrid}

columns

() => {
  const [data, setData] = useState<Array<[string, string]>>([
    ['Key', 'Value'],
    ['Key', ''],
    ['', '']
  ]);

  const onChange = useCallback(
    (target: number, changingKey?: boolean) => (e: ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;

      setData((curr) => {
        const updatedData = [...curr];
        const entry = updatedData[target];
        updatedData[target] = changingKey ? [newValue, entry[1]] : [entry[0], newValue];

        if (updatedData[updatedData.length - 1][0]) {
          updatedData.push(['', '']);
        }

        return updatedData;
      });
    },
    []
  );

  const onRemove = useCallback(
    (target: number) => () => {
      setData((curr) => {
        const updatedData = curr.filter((_item, index) => target !== index);

        if (updatedData[updatedData.length - 1][0]) {
          updatedData.push(['', '']);
        }

        return updatedData;
      });
    },
    []
  );

  const isDuplicateKey = useCallback(
    (target: number) => {
      const value = data[target][0].trim();
      return value.length > 0 && data.findIndex(([key]) => key === value) < target;
    },
    [data]
  );

  return (
    <Box width="100%" maxWidth={420}>
      <DataGrid columns={['auto', 'auto', 'min-content']}>
        {data.map(([key, value], index) => (
          <DataGrid.Row key={index}>
            <DataGrid.Input
              aria-label="Entry Key"
              value={key}
              placeholder="Key"
              error={isDuplicateKey(index) ? 'Duplicate key' : undefined}
              onChange={onChange(index, true)}
            />
            <DataGrid.Input aria-label="Entry value" value={value} placeholder="Value" onChange={onChange(index, false)} />
            {!key && !value ? (
              <DataGrid.Cell />
            ) : (
              <DataGrid.Button
                disabled={data.length === 1}
                onClick={onRemove(index)}
                icon={IconCloseSmall}
                aria-label="Delete entry"
                size="small"
              />
            )}
          </DataGrid.Row>
        ))}
      </DataGrid>
    </Box>
  );
}

DataGrid

() => {
  const [data, setData] = useState<Array<[string, string]>>([
    ['Key', 'Value'],
    ['Key', ''],
    ['', '']
  ]);

  const onChange = useCallback(
    (target: number) => (e: ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;

      setData((curr) => {
        const updatedData = [...curr];
        const entry = updatedData[target];
        updatedData[target] = [entry[0], newValue];
        return updatedData;
      });
    },
    []
  );

  return (
    <Box width="100%" maxWidth={420}>
      <DataGrid columns={['auto', 'auto', 'min-content']}>
        {data.map(([key, value], index) => (
          <DataGrid.Row key={index}>
            <DataGrid.Input
              aria-label="Entry Key"
              value={key}
              placeholder="Key"
              error={index === 1 ? 'Duplicate key' : undefined}
            />
            <DataGrid.SecretInput aria-label="Entry value" value={value} placeholder="Value" onChange={onChange(index)} />
            <DataGrid.Button disabled={data.length === 1} icon={IconCloseSmall} aria-label="Delete entry" />
          </DataGrid.Row>
        ))}
      </DataGrid>
    </Box>
  );
}

Data Grid component

With Secret