Skip to content

Instantly share code, notes, and snippets.

@harrybanda
Created September 21, 2021 13:45
Show Gist options
  • Save harrybanda/0643c7ec13f3aab366dd25d75a3a8a6c to your computer and use it in GitHub Desktop.
Save harrybanda/0643c7ec13f3aab366dd25d75a3a8a6c to your computer and use it in GitHub Desktop.
BooksTable.jsx
import ForgeUI, {
Fragment,
Text,
Table,
Head,
Row,
Cell,
Button,
ButtonSet,
} from "@forge/ui";
export const BooksTable = ({ books, setOpenModal }) => {
return (
<Fragment>
<Button
text="Add Book"
icon="add-circle"
onClick={() => setOpenModal(true)}
/>
<Table>
<Head>
<Cell>
<Text>Book Name</Text>
</Cell>
<Cell>
<Text>Author</Text>
</Cell>
<Cell>
<Text>Quantity</Text>
</Cell>
<Cell>
<Text>Price</Text>
</Cell>
<Cell>
<Text>Actions</Text>
</Cell>
</Head>
{books.map((book) => (
<Row>
<Cell>
<Text>{book.bookname}</Text>
</Cell>
<Cell>
<Text>{book.author}</Text>
</Cell>
<Cell>
<Text>{book.quantity}</Text>
</Cell>
<Cell>
<Text>{book.price}</Text>
</Cell>
<Cell>
<ButtonSet>
<Button text="Edit" icon="edit" />
<Button appearance="danger" icon="trash" />
</ButtonSet>
</Cell>
</Row>
))}
</Table>
</Fragment>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment