List.js

// Specification of the List component

// This complete example describe the API of the component
// It has to be implemented to work with this API

function ListExample() {
  const list = useListState({
    columns: {
      name: {
        props: {
          col: 'auto',
          width: 200,
        },
      },
      description: {
        props: {
          col: 1,
        },
      },
    },
  })

  return (
    <List {...list}>
      <ListHeader {...list}>
        <ListHeaderCell {...list} colId="name" />
        <ListHeaderCell {...list} colId="description" />
      </ListHeader>
      <ListRow {...list}>
        <ListRowCell {...list} colId="name">
          Apple
        </ListRowCell>
        <ListRowCell {...list} colId="description">
          A red fruit
        </ListRowCell>
      </ListRow>
      <ListRow {...list}>
        <ListRowCell {...list} colId="name">
          Banana
        </ListRowCell>
        <ListRowCell {...list} colId="description">
          A yellow fruit
        </ListRowCell>
      </ListRow>
    </List>
  )
}