@actyx/industrial-ui/example

app.tsx

import React from 'react';
import './App.css';
import { TableData } from '@actyx/industrial-ui'

function App() {
  type Item = Readonly<{
    id: string;
    description: string;
    value: string;
  }>;

  const lorem = 'Lorem ipsum dolor sit amet.';

  const data: ReadonlyArray<Item> = [
    { id: 'a', description: `A ${lorem}`, value: '1' },
    { id: 'b', description: `B ${lorem}`, value: '2' },
    { id: 'c', description: `C ${lorem}`, value: '3' }
  ];

  function Row({ id, description, value }: Item) {
    return (
      <>
        <td>{id}</td>
        <td>{description}</td>
        <td>{value}</td>
      </>
    );
  }

  const baseProps = {
    data,
    getUniqKey: (datum: Item) => datum.id,
    header: Object.keys(data[0]).map((x, idx) => (
      <td style={{ fontWeight: 'bold' }} key={idx}>
        {x.toUpperCase()}
      </td>
    )),
    renderRow: ({ id, description, value }: Item) => (
      <Row id={id} description={description} value={value} />
    )
  };

  return <TableData<Item> {...baseProps} isRowSelected={x => x.id === 'b'} />
}

export default App;