react-bootstrap#Table JavaScript Examples
The following examples show how to use
react-bootstrap#Table.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Nodes.jsx From ThermaKube with MIT License | 6 votes |
|
Nodes = ({ data }) => {
const nodeList = data[0].children.map((data, index) => {
return (
<tbody key={`tbody${index}`}>
<tr>
<td>{data.name}</td>
<td>{data.cpu}</td>
</tr>
</tbody>
);
});
return (
<div className='nodeContainer'>
<h4 className='nodeTitle'>Nodes List</h4>
<Table striped bordered hover>
<thead>
<tr>
<th>Node Name</th>
<th>CPU</th>
</tr>
</thead>
{nodeList}
</Table>
</div>
);
}
Example #2
| Source File: PromotionsListComponent.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
PromotionsList = ({promotions}) => {
return (
<Table responsive>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Product</th>
<th>State</th>
<th>Codes</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{promotions.map(promotion =>
<PromotionsListRow key={promotion._id} promotion={promotion}/>)}
</tbody>
</Table>
);
}
Example #3
| Source File: index.js From Algorithm-Visualizer with MIT License | 6 votes |
|
Stats = ({ runtime, nodesProccessed, fastestPath, algorithmRan }) => {
return (
<Table striped bordered hover variant="dark" size="sm">
<tbody>
<tr>
<th>Algorithm</th>
<th>Runtime (Microseconds)</th>
<th>Nodes Processed</th>
<th>Fastest Path Total</th>
</tr>
<tr>
<td>{algorithmRan}</td>
<td>{runtime}</td>
<td>{nodesProccessed}</td>
<td>{fastestPath}</td>
</tr>
</tbody>
</Table>
);
}
Example #4
| Source File: NoticePlacementmore.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div>
<Card>
<Card.Body>
<Card.Title>
<h5 align="center">Notice Board-Placements</h5>
</Card.Title>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Programme</th>
<th>Date</th>
<th>CTC</th>
</tr>
</thead>
<tbody>
{this.state.train.map((item =>
<tr>
<td>{this.state.train.indexOf(item)+1}</td>
<td>{item.Company_name}</td>
<td>{item.Date}</td>
<td>{item.CTC}</td>
</tr>
))}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
</div>
);
}
Example #5
| Source File: HistoryMutation.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function HistoryMutation({ fiucHistoryMutation = [] }) {
if (fiucHistoryMutation.length === 0) {
return <Message msgId="cadastrapp.nodata" />;
}
return (<Table condensed>
<thead>
<tr>
<th><Message msgId={'cadastrapp.duc.dateacte'}/></th>
<th><Message msgId={'cadastrapp.duc.reference_parcelle'}/></th>
<th><Message msgId={'cadastrapp.duc.type_mutation'}/></th>
</tr>
</thead>
<tbody>
{
fiucHistoryMutation
.map(({ ccocomm, ccoprem, ccosecm, dnuplam, ...rest }) => {
let referenceParcelle = [ccocomm, ccoprem, ccosecm, dnuplam].filter(v => v).join(' ') || '';
return { referenceParcelle, ...rest };
})
.map(({ jdatat, type_filiation: filiation, referenceParcelle }) => <tr><td>{jdatat}</td><td>{referenceParcelle}</td><td>{filiation}</td></tr>)
}
</tbody>
</Table>);
}
Example #6
| Source File: Services.jsx From ThermaKube with MIT License | 6 votes |
|
Services = ({ data }) => {
const [table, setTable] = useState([]);
useEffect(() => {
const serviceList = data.map((data, index) => {
return (
<tbody key={`tbody${index}`}>
<tr>
<td>{data.name}</td>
<td>{data.type}</td>
<td>{data.namespace}</td>
<td>{data.port}</td>
<td>{data.clusterIP}</td>
</tr>
</tbody>
);
});
setTable(serviceList);
}, []);
return (
<div className='serviceContainer'>
<h4 className='serviceTitle'>Services List</h4>
<Table striped bordered hover>
<thead>
<tr>
<th>Service Name</th>
<th>Type</th>
<th>Namespace</th>
<th>Port</th>
<th>Cluster IP</th>
</tr>
</thead>
{table}
</Table>
</div>
);
}
Example #7
| Source File: ProfileView.jsx From ms-identity-javascript-react-spa-dotnetcore-webapi-obo with MIT License | 6 votes |
|
render() {
return (
<div className="p-view">
<Table striped bordered hover>
<tbody>
<tr>
<th>Name</th>
<td id="givenName">{this.props.profile.givenName}</td>
</tr>
<tr>
<th>Surname</th>
<td id="surname">{this.props.profile.surname}</td>
</tr>
<tr>
<th>Email</th>
<td id="userPrincipalName">{this.props.profile.userPrincipalName}</td>
</tr>
<tr>
<th>Job Title</th>
<td id="jobTitle">{this.props.profile.jobTitle}</td>
</tr>
<tr>
<th>Mobile Phone</th>
<td id="mobilePhone">{this.props.profile.mobilePhone}</td>
</tr>
<tr>
<th>Preferred Language</th>
<td id="preferred Language">{this.props.profile.preferredLanguage}</td>
</tr>
</tbody>
</Table>
<Button variant="primary" onClick={this.handleEdit}>Edit</Button>
</div>
);
}
Example #8
| Source File: TeamPlayers.js From fifa with GNU General Public License v3.0 | 6 votes |
|
render() {
const { theme } = this.context;
return (
<div className="myTeamBox">
<Table
striped
borderless
hover
variant="dark"
id="team_players"
style={{ background: theme.accentDarker2 }}
>
<thead>
<tr>
<th>#</th>
<th>Pos</th>
<th>Name</th>
<th>Rating</th>
</tr>
</thead>
<tbody>{this.renderTeamPlayers()}</tbody>
</Table>
</div>
);
}
Example #9
| Source File: derivedAddressesTable.js From xpub-tool with MIT License | 6 votes |
|
DerivedAddressesTable = ({ addressList, showCount, extPubKey }) => {
return (
<Table bordered>
<thead>
<tr>
<th>
Addresses for <code>{maskKey(extPubKey)}</code>
</th>
</tr>
</thead>
<tbody>
{addressList.map(({ path, address }, i) => {
return (
i < (showCount || addressList.length) && (
<PathAddressRow key={path} path={path} address={address} />
)
)
})}
<PathAddressRow path="..." address="..." />
</tbody>
</Table>
)
}
Example #10
| Source File: xpubMetadata.js From xpub-tool with MIT License | 6 votes |
|
ExtPubKeyMetadata = ({ extPubKey }) => {
const meta = getExtPubKeyMetadata(extPubKey)
const tableRows = []
Object.entries(meta).forEach(([key, value]) => {
tableRows.push(
<tr key={key}>
<th>{key}</th>
<td>{value}</td>
</tr>
)
})
return (
<Table variant="dark">
<thead>
<tr>
<th colSpan="2">
<code>{extPubKey}</code>
</th>
</tr>
</thead>
<tbody>{tableRows}</tbody>
</Table>
)
}
Example #11
| Source File: MaskStoreTable.js From covid-19-mask-map with MIT License | 6 votes |
|
function MaskStoreTable() {
const { t } = useTranslation();
const { maskStores } = useMaskData();
return (
<>
<Table responsive>
<thead>
<tr>
<th>{t("storeData.name")}</th>
<th>{t("storeData.stockCount")}</th>
<th>{t("storeData.address")}</th>
</tr>
</thead>
<tbody>
{maskStores.map((store) => {
return (
<tr key={store.code}>
<td>{store.name}</td>
<td>
{
<RemainingStockBadge
remainingStockStr={
store.remain_stat
}
/>
}
</td>
<td>{store.addr}</td>
</tr>
);
})}
</tbody>
</Table>
</>
);
}
Example #12
| Source File: LeaderBoard.jsx From snapdesk with MIT License | 6 votes |
|
render() {
let leaderList;
if (!this.props.leaderList || this.props.leaderList.length === 0) {
leaderList = <p>No current Rankings</p>;
} else {
leaderList = [];
for (let i = 0; i < this.props.leaderList.length; i++) {
console.log('leaderboard', this.props.leaderList[i])
let currentLeader;
currentLeader = (
<LeaderBox
key={`leader${i}`}
mentorId = {this.props.leaderList[i].mentor_id}
username={this.props.leaderList[i].name}
totalSnaps={this.props.leaderList[i].sum}
ranking={i+1}
/>
)
leaderList.push(currentLeader);
}
}
return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th style={{ textAlign: 'center' }}>Ranking</th>
<th style={{ textAlign: 'center' }}>Mentor</th>
<th style={{ textAlign: 'center' }}>Total Snaps</th>
</tr>
</thead>
<tbody>
{leaderList}
</tbody>
</Table>
</div>
)
}
Example #13
| Source File: 2loadkeys.js From twmwallet with MIT License | 5 votes |
|
render() {
const {safex_keys} = this.state;
var table;
table = Object.keys(this.state.safex_keys).map((key) => {
console.log(`the key ${key}`)
return (
<tr>
<td>{safex_keys[key].public_addr.slice(0, 5) + "..." + safex_keys[key].public_addr.slice(96, 102)}</td>
<td>
<button onClick={() => this.proceed_to_import(key)}>Restore Key</button>
</td>
</tr>
);
});
return (
<Container className="d-flex">
<div className="entry-form">
<div className="align-self-start">
<Button variant="danger" onClick={this.exit_home}>Home</Button>
</div>
<p>
You can exit this process and use the wallet along the other paths
by clicking this exit button:
</p>
<div>
<Button variant="danger" onClick={this.return_to_entry}>Exit Legacy Mode</Button>
</div>
<Table striped bordered hover>
<thead>
<tr>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{table}
</tbody>
</Table>
</div>
</Container>
);
}
Example #14
| Source File: positions.jsx From GraphVega with MIT License | 5 votes |
|
Positions = props => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const displayQuantity = index => {
return props.positions[index].position === "long" ? (
<div className="text-success">+{props.positions[index].quantity}</div>
) : (
<div className="text-danger">{props.positions[index].quantity}</div>
);
};
return (
<>
<Badge badgeContent={props.positions.length} color="secondary">
<Button onClick={handleShow} variant="contained" color="primary">
Positions
</Button>
</Badge>
<Modal
show={show}
onHide={handleClose}
style={{ background: "rgba(0, 0, 0,0.5)" }}
>
<Modal.Body>
<h4>
<b>Positions</b>
</h4>
<br />
{props.positions[0]?
""
:<div className="text-secondary">Looks like you have not added any positions yet! </div>
}
<Table>
{props.positions.map((option, index) => {
return (
<tr>
<th>
{displayQuantity(index)}
</th>
<th>
{option["description"]}
</th>
<th>
<Button
size="small"
// variant="outlined"
color="secondary"
onClick={() => {
props.onRemovePosition(index);
}}
>
<ClearIcon fontSize="small"/> Remove
</Button>
</th>
</tr>
);
})}
</Table>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Example #15
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>TARANG</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The Goddess of Water</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/de442321b07d49c09620569fa592889f/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1 brief">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/16TP7bU2MGEFecJbKzfMHkA8Lb3V4XeNi/view?usp=sharing" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #16
| Source File: Plot.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function Plot({
isCNIL1,
isCNIL2,
selectedStyle,
parcelle,
fiuc,
onGeneratePlotInformation = () => {},
baseMaps = []
}) {
let [isPlotShown, setIsPlotShown] = useState(false);
const handlePlotClick = () => {
setIsPlotShown(!isPlotShown);
};
if (!fiuc) {
return "Loading";
}
return (<>
<div style={{ margin: 10 }}>
<Button
bsStyle={isPlotShown ? "primary" : "default"}
onClick={handlePlotClick}>
<Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
<Message msgId={"cadastrapp.bordereauparcellaire.title"}/>
</Button>
</div>
<PlotInformationRadio isCNIL1={isCNIL1} isCNIL2={isCNIL2} parcelle={parcelle} isShown={isPlotShown} baseMaps={baseMaps} onGeneratePlotInformation={onGeneratePlotInformation} selectedStyle={selectedStyle}/>
<Table condensed>
<thead>
<tr>
<th><Message msgId={'cadastrapp.ficu.description'}/></th>
<th><Message msgId={'cadastrapp.ficu.value'}/></th>
</tr>
</thead>
<tbody>
<tr><td><Message msgId={'cadastrapp.ficu.commune'}/></td><td>{ fiuc.libcom + ' (' + fiuc.cgocommune + ')' }</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.section'}/></td><td>{ fiuc.ccopre + fiuc.ccosec }</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.parcelle'}/></td><td>{ fiuc.dnupla }</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.voie'}/></td><td>{ fiuc.ccoriv }</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.adresse'} /></td><td>{fiuc.dnvoiri + fiuc.dindic + " " + fiuc.cconvo + " " + fiuc.dvoilib}</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.contenancedgfip'}/></td><td>{ fiuc?.dcntpa?.toLocaleString()}</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.contenancesig'}/></td><td>{ fiuc?.surfc?.toLocaleString()}</td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.batie'}/></td><td><Message msgId={fiuc.gparbat === '1' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
<tr><td><Message msgId={'cadastrapp.ficu.urbain'}/></td><td><Message msgId={fiuc.gurbpa === 'U' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
</tbody>
</Table>
</>);
}
Example #17
| Source File: index.js From bootstrap-dsp with MIT License | 5 votes |
|
function HomePage() {
return (
<>
<h1>React Bootstrap DSP for Adobe XD VSCode Extension</h1>
<h4>Example heading <Badge variant="secondary">New</Badge></h4>
<Button variant="primary">Primary Button</Button>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="[email protected]" />
</Form.Group>
</Form>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</>
);
}
Example #18
| Source File: about.js From LearningJAMStack_microCMS_template with MIT License | 5 votes |
|
AboutPage = () => (
<Layout>
<SEO title="会社概要" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">会社概要</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col>
<Table striped bordered hover>
<tbody>
<tr>
<td>社名</td>
<td>ヤー・スペーステクノロジー合同会社</td>
</tr>
<tr>
<td>本社</td>
<td>123 Nirvana St. San Francisco, CA, USA 94103</td>
</tr>
<tr>
<td>設立</td>
<td>2123年1月2日</td>
</tr>
<tr>
<td>資本金</td>
<td>$200,000</td>
</tr>
<tr>
<td>代表者</td>
<td>ヤー アトム</td>
</tr>
<tr>
<td>従業員</td>
<td>33名</td>
</tr>
<tr>
<td>売上高</td>
<td>$4,111,950（2131年12月決算）</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #19
| Source File: about.js From LearningJAMStack_Gatsby with MIT License | 5 votes |
|
AboutPage = () => (
<Layout>
<SEO title="会社概要" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">会社概要</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col>
<Table striped bordered hover>
<tbody>
<tr>
<td>社名</td>
<td>ヤー・スペーステクノロジー合同会社</td>
</tr>
<tr>
<td>本社</td>
<td>123 Nirvana St. San Francisco, CA, USA 94103</td>
</tr>
<tr>
<td>設立</td>
<td>2123年1月2日</td>
</tr>
<tr>
<td>資本金</td>
<td>$200,000</td>
</tr>
<tr>
<td>代表者</td>
<td>ヤー アトム</td>
</tr>
<tr>
<td>従業員</td>
<td>33名</td>
</tr>
<tr>
<td>売上高</td>
<td>$4,111,950（2131年12月決算）</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #20
| Source File: ModalHistory.jsx From hiring-channel-frontend with MIT License | 5 votes |
|
ModalHistory = (props) => {
const userHistoryStore = useSelector((state) => {
return state.userState.userHistory;
});
return (
<>
<Modal show={props.showModalHistory} size="lg" onHide={props.handleCloseModalHistory} centered>
<Modal.Header className="modal-header" closeButton>
<h5 className="tengah">History</h5>
</Modal.Header>
<Modal.Body>
<Table responsive className="text-center table-modal">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Date</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
{userHistoryStore.map((item, index) => {
return (
<tr>
<td>{index + 1}</td>
<td>{item.corporate_name}</td>
<td>{moment(item.hire_date).format('DD MMMM YYYY')}</td>
<td>
<img src={imgStar} alt="imgStar" className="img-star" />
{item.rating}%
</td>
</tr>
)
})}
</tbody>
</Table>
</Modal.Body>
</Modal>
</>
);
// }
}
Example #21
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>ANAHITA</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The Goddess of Water</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/21c78ab51dda4c7a9445b4fb0b877e22/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/1AN2uvKzoERqeampDUTVilUPUmSCickFL/view?usp=sharing" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #22
| Source File: Demographics.js From SaraAlert with Apache License 2.0 | 5 votes |
|
renderTable() {
return (
<div>
<h4 className="text-left">Age (Years)</h4>
<Table striped hover className="border mt-2">
<thead>
<tr>
<th></th>
{RISKLEVELS.map(risklevel => (
<th key={risklevel.toString()}>{risklevel}</th>
))}
<th>Total</th>
</tr>
</thead>
<tbody>
{AGEGROUPS.map(agegroup => (
<tr key={agegroup.toString() + '1'}>
<td key={agegroup.toString() + '2'} className="font-weight-bold">
{' '}
{agegroup}{' '}
</td>
{RISKLEVELS.map((risklevel, risklevelIndex) => (
<td key={agegroup.toString() + risklevelIndex.toString()}>{this.ageData.find(x => x.name === agegroup)[String(risklevel)]}</td>
))}
<td>{this.ageData.find(x => x.name === agegroup)['total']}</td>
</tr>
))}
</tbody>
</Table>
<h4 className="text-left">Sex</h4>
<Table striped hover className="border mt-2">
<thead>
<tr>
<th></th>
{RISKLEVELS.map(risklevel => (
<th key={risklevel.toString()}>{risklevel}</th>
))}
<th>Total</th>
</tr>
</thead>
<tbody>
{SEXES.map(sexgroup => (
<tr key={sexgroup.toString() + '1'}>
<td key={sexgroup.toString() + '2'} className="font-weight-bold">
{sexgroup}
</td>
{RISKLEVELS.map((risklevel, risklevelIndex) => (
<td key={sexgroup.toString() + risklevelIndex.toString()}>{this.sexData.find(x => x.name === sexgroup)[String(risklevel)]}</td>
))}
<td>{this.sexData.find(x => x.name === sexgroup)['total']}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}
Example #23
| Source File: MonitoreeFlow.js From SaraAlert with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="card-square text-center">
<Card.Header as="h5" className="text-left">
Monitoree Flow Over Time
</Card.Header>
<Card.Body className="card-body">
<Row className="mx-md-5 mx-lg-0">
{/* Any height: 0px <tr>s are to ensure proper Bootstrap striping. */}
<Table striped borderless>
<thead>
<tr>
<th className="py-0"></th>
<th className="py-0"> Last 24 Hours </th>
<th className="py-0"> Last 14 Days </th>
<th className="py-0"> Total </th>
</tr>
</thead>
<tbody>
<tr style={{ height: '0px' }}></tr>
<tr>
<td className="py-1 font-weight-bold text-left">
<u>INCOMING</u>{' '}
</td>
</tr>
<tr>
<td className="text-right">NEW ENROLLMENTS</td>
<td>{this.data_last_24_hours.new_enrollments}</td>
<td>{this.data_last_14_days.new_enrollments}</td>
<td>{this.data_total.new_enrollments}</td>
</tr>
<tr>
<td className="text-right">TRANSFERRED IN</td>
<td>{this.data_last_24_hours.transferred_in}</td>
<td>{this.data_last_14_days.transferred_in}</td>
<td>{this.data_total.transferred_in}</td>
</tr>
<tr style={{ height: '0px' }}></tr>
<tr>
<td className="py-1 font-weight-bold text-left">
<u>OUTGOING</u>{' '}
</td>
</tr>
<tr className="pt-5">
<td className="text-right">CLOSED</td>
<td>{this.data_last_24_hours.closed}</td>
<td>{this.data_last_14_days.closed}</td>
<td>{this.data_total.closed}</td>
</tr>
<tr>
<td className="text-right">TRANSFERRED OUT</td>
<td>{this.data_last_24_hours.transferred_out}</td>
<td>{this.data_last_14_days.transferred_out}</td>
<td>{this.data_total.transferred_out}</td>
</tr>
</tbody>
</Table>
</Row>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #24
| Source File: StuList.jsx From LaayakWeb with MIT License | 5 votes |
|
function StuList({ code, crEmail }) {
const style = { border: "1px solid black", padding: 3 };
const [stu, setStu] = useState([]);
useEffect(() => {
const docRef = db
.collection("classes")
.doc(code)
.collection("details")
.doc("stuList");
docRef.onSnapshot((snap) => {
if (snap.data()) setStu([...snap.data().studentsList]);
});
});
const getStuList = () => {
return (
<div>
<Table
striped
bordered
responsive
className="mx-auto"
style={{ maxWidth: "600px" }}
>
<thead>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Email</th>
<th>Kick</th>
</tr>
</thead>
<tbody>
{stu.map((student) =>
student.email === crEmail ? (
<PrintCR key="cr" student={student} />
) : (
<PrintStu
student={student}
style={style}
key={student.rollNo}
stuList={stu}
code={code}
/>
)
)}
</tbody>
</Table>
</div>
);
};
const noStu = () => {
return <h4>No students have joined the class yet!</h4>;
};
return <div>{stu.length === 0 ? noStu() : getStuList()}</div>;
}
Example #25
| Source File: RiskStratificationTable.js From SaraAlert with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="card-square text-center">
<Card.Header as="h5" className="text-left">
Monitoring Status by Risk Level Amongst Those Currently Under Active Monitoring
</Card.Header>
<Card.Body>
<Table striped borderless hover>
<thead>
<tr>
<th></th>
{RISKLEVELS.map(risklevel => (
<th key={risklevel.toString()}>
<div> {risklevel} </div>
<div className="text-secondary"> n (col %) </div>
</th>
))}
<th>
<div> Total </div>
<div className="text-secondary"> n (col %) </div>
</th>
</tr>
</thead>
<tbody>
<tr style={{ backgroundColor: '#FA897B' }}>
<td className="font-weight-bold">Symptomatic</td>
{RISKLEVELS.map(risklevel => (
<td key={risklevel.toString()}>
{this.tableData['Symptomatic'][`${String(risklevel)}_n`]} ({this.tableData['Symptomatic'][`${String(risklevel)}_p`]}%)
</td>
))}
<td>
{this.tableData['Symptomatic']['total_n']} ({this.tableData['Symptomatic']['total_p']}%)
</td>
</tr>
<tr style={{ backgroundColor: '#D0E6A5' }}>
<td className="font-weight-bold">Asymptomatic</td>
{RISKLEVELS.map(risklevel => (
<td key={risklevel.toString()}>
{this.tableData['Asymptomatic'][`${String(risklevel)}_n`]} ({this.tableData['Asymptomatic'][`${String(risklevel)}_p`]}%)
</td>
))}
<td>
{this.tableData['Asymptomatic']['total_n']} ({this.tableData['Asymptomatic']['total_p']}%)
</td>
</tr>
<tr style={{ backgroundColor: '#FFDD94' }}>
<td className="font-weight-bold">Non-Reporting</td>
{RISKLEVELS.map(risklevel => (
<td key={risklevel.toString()}>
{this.tableData['Non-Reporting'][`${String(risklevel)}_n`]} ({this.tableData['Non-Reporting'][`${String(risklevel)}_p`]}%)
</td>
))}
<td>
{this.tableData['Non-Reporting']['total_n']} ({this.tableData['Non-Reporting']['total_p']}%)
</td>
</tr>
<tr>
<td className="font-weight-bold">Total</td>
<td>{this.totalCount['High']}</td>
<td>{this.totalCount['Medium']}</td>
<td>{this.totalCount['Low']}</td>
<td>{this.totalCount['No Identified Risk']}</td>
<td>{this.totalCount['Missing']}</td>
<td>{this.totalCount.total}</td>
</tr>
</tbody>
</Table>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #26
| Source File: NoticeTraningmore.js From GB-GCGC with MIT License | 5 votes |
|
render() {
return (
<div className="container">
<Card>
<Card.Body>
<Card.Title>
<h5
align="center"
style={{ fontSize: "20px", fontFamily: "Segoe UI" }}
>
Notice Board-Training
</h5>
</Card.Title>
<Card.Text>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{this.state.dash.map((item =>
<tr>
<td>{item.from_date}</td>
<td>{item.to_date}</td>
<td>{item.name_of_the_program}</td>
<td>{item.status}</td>
</tr>
))}
</tbody>
</Table>
</div>
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
Example #27
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #28
| Source File: UserStaff.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div style={{backgroundColor:'#C7CCDB'}}>
<Container>
<Row>
<Col align="left">
<NavLink tag={Redirect} to={"/userstaffAdd"}>
<Button style={{backgroundColor: "#2A324B",color: "white",borderColor: "#2A324B"}}>
Add Staff
</Button>
</NavLink>
</Col>
</Row>
{/*<Row className="pt-3 pb-3">
<Col md="6"style={{"text-align":"initial"}}>
Show
<span style={{"padding":"10px"}}>
<select value={this.state.show} onChange={this.onChangeshow}>
<option value="0">All</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</span>
Entities
</Col>
</Row>*/}
<Row >
<Col align="left" className="pt-1">
<div>
<ReactHTMLTableToExcel
className="btn btn-secondary"
table="Data"
filename="Filtered Students"
sheet="Sheet1"
buttonText="EXCEL"
style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}}
/>
</div>
</Col>
<Col>
<div align="right">Search:<input type="text" name="search" onChange={this.onChangesearch}/></div>
</Col>
</Row>
<br/>
<Row>
<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
<thead style={{backgroundColor:'#2A324B',color:'white'}}>
<tr>
<th>Emp_Id</th>
<th>Emp_Name</th>
<th>Email</th>
<th>Campus</th>
<th>Department</th>
<th>Mobile</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.StaffList()}
</tbody>
</Table>
</Row>
</Container>
</div>
)
}
Example #29
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>VARUN</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The First of them</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/6e1274e10d9e4b6a922a5ed0baf9445f/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/0B952Pi5TJ8RGcWJRUWF5YllsM2M/view?resourcekey=0-YEob3LFfYmo5QhRv_96zdA" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
