Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class App extends React.Component {
- render() {
- const columns = [
- {
- header: '',
- cell: 'id',
- },
- {
- header: 'First Name',
- cell: 'firstName',
- },
- {
- header: 'Last Name',
- cell: 'lastName',
- },
- {
- header: 'Phone Number',
- cell: 'phoneNumber',
- },
- {
- header: 'Email',
- cell: 'email',
- },
- ]
- const data = generateFakeData(
- faker => ({
- id: faker.random.uuid(),
- firstName: faker.name.firstName(),
- lastName: faker.name.lastName(),
- phoneNumber: faker.phone.phoneNumber(),
- email: faker.internet.email(),
- }),
- 100
- )
- return (
- <div
- role="grid"
- aria-readonly="true"
- aria-colcount={columns.length}
- aria-rowcount={data.length}
- style={{
- display: 'grid',
- gridTemplateColumns: `repeat(${columns.length}, auto)`,
- border: '1px solid #f1f1f1',
- }}
- >
- {/* header */}
- {columns.map((column, index) => (
- <div
- key={index}
- role="columnheader"
- id={`column-${index}`}
- style={{
- padding: 12,
- whiteSpace: 'nowrap',
- backgroundColor: '#f1f1f1',
- position: 'sticky',
- top: 0,
- zIndex: 5,
- }}
- >
- {column.header}
- </div>
- ))}
- {/* body */}
- {data.map(row =>
- columns.map((column, index) => (
- <div
- key={index}
- role="gridcell"
- aria-labelledby={`column-${index}`}
- style={{
- padding: 12,
- whiteSpace: 'nowrap',
- borderTop: '1px solid #f1f1f1',
- backgroundColor: '#ffffff',
- position: index === 0 && 'sticky',
- left: 0,
- zIndex: index === 0 ? 3 : 1,
- }}
- >
- {row[column.cell]}
- </div>
- ))
- )}
- </div>
- )
- }
- }
Add Comment
Please, Sign In to add comment