| | | | | |
|---|
| Load Balancer 3 | HTTP | 3000 | Round robin | Kevins VM Groups | Disabled |
| Load Balancer 1 | HTTP | 443 | Round robin | Maureens VM Groups | Starting |
| Load Balancer 2 | HTTP | 80 | DNS delegation | Andrews VM Groups | Active |
| Load Balancer 6 | HTTP | 3000 | Round robin | Marcs VM Groups | Disabled |
| Load Balancer 4 | HTTP | 443 | Round robin | Mels VM Groups | Starting |
| Load Balancer 5 | HTTP | 80 | DNS delegation | Ronjas VM Groups | Active |
<DataTable
rows={rowData}
headers={headerData}
render={({ rows, headers, getHeaderProps }) => (
<TableContainer title="DataTable">
<Table>
<TableHead>
<TableRow>
{headers.map(header => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.id}>
{row.cells.map(cell => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>)}
/>
| | | | | | |
|---|
| Load Balancer 3 | HTTP | 3000 | Round robin | Kevins VM Groups | Disabled |
| Load Balancer 1 | HTTP | 443 | Round robin | Maureens VM Groups | Starting |
| Load Balancer 2 | HTTP | 80 | DNS delegation | Andrews VM Groups | Active |
| Load Balancer 6 | HTTP | 3000 | Round robin | Marcs VM Groups | Disabled |
| Load Balancer 4 | HTTP | 443 | Round robin | Mels VM Groups | Starting |
| Load Balancer 5 | HTTP | 80 | DNS delegation | Ronjas VM Groups | Active |
<DataTable
rows={rowData}
headers={headerData}
render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
<TableContainer title="DataTable with expansion">
<Table {...getTableProps()}>
<TableHead>
<TableRow>
<TableExpandHeader />
{headers.map(header => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<React.Fragment key={row.id}>
<TableExpandRow {...getRowProps({ row })}>
{row.cells.map(cell => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableExpandRow>
{row.isExpanded && (
<TableExpandedRow colSpan={headers.length + 1}>
<p>Aux squad rules</p>
</TableExpandedRow>
)}
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
)}/>
<DataTable
rows={rowData}
headers={headerData}
render={({ rows, headers, getHeaderProps, getSelectionProps, getRowProps }) => (
<TableContainer title="DataTable with selection">
<Table>
<TableHead>
<TableRow>
<TableSelectAll {...getSelectionProps()} />
{headers.map(header => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow {...getRowProps({ row })}>
<TableSelectRow {...getSelectionProps({ row })} />
{row.cells.map(cell => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>)}
/>
const headerData = [
{
header: 'Name',
key: 'name',
},
{
header: 'Protocol',
key: 'protocol',
},