Indexes of components are not displaying correctly

[liuwei-HP]

Expected Behavior

The second column shows on the right or provide a property for our own definition

Actual Behavior

Shows on the left and is not aligned

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

1. Use Index with "list" view type to display data.
2. Open the page Use with Chrome browser.
3. Shows not as expected.

   Your Environment

• Grommet-index version: 1.0.0
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Win7

[nickjvm]

@liuwei-HP I believe this can be achieved with existing props (using justify="between"):

<ListItem justify="between">
  <Box>Left-aligned content</Box>
  <Box>Right-aligned content</Box>
</ListItem>

Codepen

[christinHP]

@nickjvm we use gromment-index/components/Index.js, not grommet/components/ListItem.js

[nickjvm]

@christinHP You can combine the usage of both to achieve the layout you need. Use ListItem from Grommet and pass your own component to Index to use for each item via the itemComponent prop.

import Index from 'grommet-index/components/Index';
import ListItem from 'grommet/components/ListItem';

const MyItemComponent = ({item}) => {
  return (
     <ListItem justify="between">
       <Box>{item.name}</Box> {/*left-aligned*/}
       <Box>{item.somethingElse}</Box> {/*right-aligned*/}
     </ListItem>
  );
}

...

export function MyIndex() {
  return (
    <Index view="list" itemComponent={MyItemComponent} ... />
  );
}

[christinHP]

@nickjvm Thank you, we will try with itemComponent

[tracybarmore]

Thanks for the collaboration! We are closing this issue for now. Feel free to reopen if there are more concerns. Thanks!