reactstrap#Table JavaScript Examples
The following examples show how to use
reactstrap#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: Leaderboard.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div className="lb">
<Table striped bordered hover zoom responsive>
<thead>
<tr>
<th>Rank</th>
<th>Roll Number</th>
<th>Name</th>
<th>Branch & Section</th>
<th>CoCubes</th>
<th>Amcat</th>
<th>Internal</th>
</tr>
</thead>
<tbody>
{this.StudentsList()}
</tbody>
</Table>
</div>
);
}
Example #2
| Source File: MoviesList.js From web-scraping with MIT License | 6 votes |
|
render () {
return (
<div className="moviesList" key={this.state.list}>
<Table bordered responsive>
<thead>
<tr>
{this.state.colNames.map((col, index) => <th key={index}>{col}</th>)}
</tr>
</thead>
<tbody>
{this.state.list.map((movie, index) =>
<tr key={index}>
<th>{movie.name}</th>
<td>{movie.year}</td>
<td>{movie.imdb_ratings}</td>
<td>{movie.metascores}</td>
<td>{movie.movieVotes}</td>
<td>{movie.movieNumbers}</td>
<td>{movie.runtimes}</td>
<td>{movie.genres}</td>
</tr>
)}
</tbody>
</Table>
</div>
)
}
Example #3
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className="mb-4">
<Table responsive>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</div>
)
}
Example #4
| Source File: User.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
const user = usersData.find( user => user.id.toString() === this.props.match.params.id)
const userDetails = user ? Object.entries(user) : [['id', (<span><i className="text-muted icon-ban"></i> Not found</span>)]]
return (
<div className="animated fadeIn">
<Row>
<Col lg={6}>
<Card>
<CardHeader>
<strong><i className="icon-info pr-1"></i>User id: {this.props.match.params.id}</strong>
</CardHeader>
<CardBody>
<Table responsive striped hover>
<tbody>
{
userDetails.map(([key, value]) => {
return (
<tr key={key}>
<td>{`${key}:`}</td>
<td><strong>{value}</strong></td>
</tr>
)
})
}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
)
}
Example #5
| Source File: Assessment.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div style={{backgroundColor:'#C7CCDB'}}>
<Container>
<Row>
<NavLink tag={Link} to={"/AddStudent"}>
<Button
style={{
backgroundColor: "#2A324B",
color: "white",
borderColor: "#2A324B",
}}
>
Add Assessment
</Button>
</NavLink>
</Row>
<Row>
<Col align="left" styles={{padding:'10'}}>
<div>
<ReactHTMLTableToExcel
className="btn btn-secondary"
table="Data"
filename="Filtered Students"
sheet="Sheet1"
buttonText="EXCEL"
style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}}
/>
</div>
</Col>
</Row>
<br/>
<Row>
<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
<thead style={{backgroundColor:'#2A324B',color:'white'}}>
<tr>
<th>Sno</th>
<th align="left">Name of the Assessment</th>
<th align="left">YOP</th>
<th>Date Of Assessment</th>
<th>No of students attended</th>
<th>No of Absentees</th>
<th>Highest Score</th>
<th>Average Score</th>
<th>Least Score</th>
<th></th>
</tr>
</thead>
<tbody>
{this.StudentsList()}
</tbody>
</Table>
</Row>
</Container>
</div>
)
}
Example #6
| Source File: TableCovid.js From covidAnalytics with MIT License | 5 votes |
|
render(){
//Enumera linhas tabela
var i = 1;
return(
<div className="TabContainer">
<Card>
<CardBody>
<CardTitle className="TabTitle mb-2 mb-xl-2 font-weight-bold">
Câmpus da FURG e municípios limítrofes
</CardTitle>
</CardBody>
<Table striped>
<thead>
<tr>
<th>#</th>
<th>Cidade</th>
<th>Casos Confirmados</th>
<th>Óbitos</th>
</tr>
</thead>
<tbody>
{/* Renderiza as linhas da tabela conforme o numero de itens dentro do objeto */}
{this.state.results.map(results =>
<tr>
<th scope="row">{i++}</th>
<td>{results.city}</td>
<td>{results.confirmed}</td>
<td>{results.deaths}</td>
</tr>
)}
</tbody>
</Table>
</Card>
</div>
);
}
Example #7
| Source File: Component.js From agenda with MIT License | 5 votes |
|
render() {
const {contacts} = this.props;
return (
<Container>
<Row>
<Col>
<Button
className="float-right"
color="primary"
size="lg"
tag={Link}
to="/contacts/new"
>
Nuevo contacto
</Button>
</Col>
</Row>
<hr/>
<Row>
<Col>
<Table bordered condensed hover stripped size="sm">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Genero</th>
<th>Fecha de nacimiento</th>
<th>Numero de telefono</th>
<th>Direccion</th>
<th>Cargo</th>
<th>Notas</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{contacts.map(contact => (
<tr>
<td>{contact.firstName}</td>
<td>{contact.lastName}</td>
<td>{contact.email}</td>
<td>{contact.gender}</td>
<td>{contact.birthDate}</td>
<td>{contact.phoneNumber}</td>
<td>{contact.address}</td>
<td>{contact.role}</td>
<td>{contact.notes}</td>
<td>
<Link to={`/contacts/${contact.id}`}>Edit</Link>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
</Container>
);
}
Example #8
| Source File: DetailMeta.js From gedge-platform with Apache License 2.0 | 5 votes |
|
DetailMeta = observer((props) => {
const { data } = props
let labelTable = [];
let AnnotationTable = [];
let labels = data.labels
let annotations = data.annotations
Object.entries(labels).forEach(([keys, values]) => {
labelTable.push(
// <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>
<tr>
<th>{keys} </th>
<td>{values}</td>
</tr>
)
});
Object.entries(annotations).forEach(([keys, values]) => {
AnnotationTable.push(
// <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>
<tr>
<th>{keys} </th>
<td>{values}</td>
</tr>
)
});
// let annotationsTable = [];
// Object.entries(annotations).forEach(([keys, values]) => {
// annotationsTable.push(
// <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>
// )
// });
useEffect(() => {
return () => {
};
}, []);
return (
<React.Fragment>
<hr />
<h4 className="card-title">라벨</h4>
<hr />
<div className="table-responsive mb-0" data-pattern="priority-columns">
<Table id="tech-companies-1" striped bordered responsive>
<thead>
<tr>
<th data-priority="1">Key</th>
<th data-priority="3">Value</th>
</tr>
</thead>
<tbody>
{labelTable}
</tbody>
</Table>
</div>
<hr />
<h4 className="card-title">어노테이션</h4>
<hr />
<div className="table-responsive mb-0" data-pattern="priority-columns">
<Table id="tech-companies-1" striped bordered responsive>
<thead>
<tr>
<th data-priority="1">Key</th>
<th data-priority="3">Value</th>
</tr>
</thead>
<tbody>
{AnnotationTable}
</tbody>
</Table>
</div>
</React.Fragment >
)
})
Example #9
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Table</strong>
</h5>
<div className="mb-5">
<Table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</div>
<h5 className="mb-4">
<strong>Inverse Table</strong>
</h5>
<div className="mb-5">
<Table dark>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</div>
</div>
)
}
Example #10
| Source File: Tables.js From covidsos with MIT License | 5 votes |
|
getTable(tableConfig) {
const currTableState = this.state.currState[tableConfig.key];
const statusList = []
if (currTableState.data.length !== 0) {
currTableState.data.map(row => row.status.toString().toLowerCase()).forEach(status => {
if (status && statusList.indexOf(status) === -1) {
statusList.push(status);
}
});
}
return (
<Col>
<Card className="shadow">
<CardHeader className="border-0">
<h3 className="mb-3 d-inline-block col-sm-4">
{tableConfig.title} ({this.state.currState[tableConfig.key].filteredData.length})
</h3>
<Form inline className="navbar-search d-inline-block ml-auto col-sm-8"
onSubmit={e => e.preventDefault()}>
<FormGroup>
{
statusList.length > 1 ?
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-filter"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Status" type="select"
value={this.state.currState[tableConfig.key].statusFilter}
onChange={e => this.filter(e, tableConfig)}>
<option value="">Status</option>
{
statusList.sort(
(a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).map(
status => {
return (<option key={status} value={status}>{status}</option>);
})
}
</Input>
</InputGroup> : null
}
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-search"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Search" type="text"
value={this.state.currState[tableConfig.key].searchString}
onChange={e => this.search(e, tableConfig)}/>
</InputGroup>
</FormGroup>
</Form>
</CardHeader>
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
<th scope="col">S.No.</th>
{
tableConfig.fieldHeaders.map(fh => {
return (
<th scope="col" key={tableConfig.key + '_' + fh}>{fh}</th>
);
})
}
<th scope="col">Action</th>
</tr>
</thead>
<tbody>{this.getRows(tableConfig)}</tbody>
</Table>
<CardFooter className="py-4">
{this.getNavigation(tableConfig)}
</CardFooter>
</Card>
</Col>
);
}
Example #11
| Source File: AllStudents.js From GB-GCGC with MIT License | 4 votes |
|
render(){
return(
<div className="AllStudents" style={{backgroundColor:'#C7CCDB'}}>
<Container>
<Row>
<Col className="Heading" align="left" style={{fontSize:"20px",fontFamily: "Segoe UI",fontWeight:"600"}}>
Manage Students
</Col>
</Row>
<Row>
<Col xs="6" className="p-2" align="left" style={{backgroundColor:"#2A324B",color:"white"}}>
<div>Search Filter</div>
</Col>
<Col xs="6" className="p-2" style={{backgroundColor:"#2A324B",color:"white"}}>
<div align="right">Total Students: <b style={{fontWeight:"800"}}>{this.state.studentno}</b> </div>
</Col>
</Row>
<Row style={{backgroundColor:"white"}}>
<Col>
<form onSubmit={this.onSubmit}>
<Row className="p-2" style={{marginTop:5,fontSize:"14px",fontFamily: "Segoe UI",fontWeight:"600"}} align="left">
<Col style={{fontSize:15}}>Education Filter</Col>
</Row>
<hr style={{margin:2,marginBottom:4}}></hr>
<Row className="p-2" style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="4" md="6" xs="12" align="left">
<Row>
<Col>Degree</Col>
</Row>
<Row>
<Col>
<select name="category" id="selectcategory" className="form-control container p-2" onChange={this.onChangecategory} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="Any">Any</option>
<option value="B.Tech">BTech</option>
<option value="MBA">MBA</option>
</select>
</Col>
</Row>
</Col>
<Col lg="4" md="6" xs="12" align="left">
<Row>
<Col xs="12">Branch</Col>
</Row>
<Row>
<Col xs="12">
<select name="branches" className="form-control container p-2" onChange={this.onChangebranches} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}} >
<option value="All">Select All</option>
<option value="CSE">Computer Science Engineering</option>
<option value="ECE">Electronics and Communication Engineering</option>
<option value="EEE">Electronics and Electrical Engineeringg</option>
<option value="Civil">Civil Engineering</option>
<option value="Mech">Mechanical Engineering</option>
</select>
</Col>
</Row>
</Col>
<Col lg="4" md="6" xs="12" align="left">
<Row>
<Col className="form-control-range container">CGPA(<span id="CGPA">{this.state.cgpa}</span>-10)</Col>
</Row>
<Row>
<Col >
<input type="range" defaultValue="0" name="mincgpa" id="mincgpa" min="0" max="10" step="0.5" className="w-100" onChange={this.onChangecgpa}/>
</Col>
</Row>
</Col>
</Row>
<Row className="p-2" style={{marginTop:5,fontSize:"14px",fontFamily: "Segoe UI",fontWeight:"600"}} align="left">
<Col style={{fontSize:15}}>Other Filter</Col>
</Row>
<hr style={{margin:2,marginBottom:4}}></hr>
<Row style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="2" md="2" xs="12" className="p-2 pl-4" align="left">
Batch
</Col>
<Col lg="4" md="10" xs="12" >
<select name="batch" className="form-control runningtext container p-2" onChange={this.onChangebatch} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="nill">No Preference</option>
<option value="2016" >2016</option>
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
</select>
</Col>
<Col lg="2" md="2" xs="12" className="p-2 pl-4" align="left">
Sort By
</Col>
<Col lg="4" md="10" xs="12">
<select name="sortby" className="form-control runningtext container p-2" onChange={this.onChangesortby} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="user_id">Roll No</option>
<option value="first_name">Name</option>
<option value="Branch">Branch</option>
<option value="b_tech_gpa" >Institute Marks</option>
<option value="SSC_percent" >10th Marks</option>
<option value="inter_percent" >12th Marks</option>
</select>
</Col>
</Row>
<Row style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="2" md="2" xs="12" className="p-2 pl-4" align="left">
Gender
</Col>
<Col lg="4" md="10" xs="12">
<select className="form-control runningtext container p-2" name="gender" onChange={this.onChangegender} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="nill">No Preference</option>
<option value="M" >Male</option>
<option value="F" >Female</option>
</select>
</Col>
<Col lg="2" md="2" xs="12" className="p-2 pl-4" align="left">
Eligible For Job
</Col>
<Col lg="4" md="10" xs="12">
<select className="runningtext container p-2" name="jobeligible" onChange={this.onChangeejobs} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="nill">No Preference</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</Col>
</Row>
<Row style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="2" md="2" xs="12" className="p-2 pl-4" align="left">
Jobs In Hand
</Col>
<Col lg="4" md="10" xs="12">
<select name="jobsinhand" className="form-control runningtext container p-2" onChange={this.onChangejobs} style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",borderColor:"#999999",color:"#999999"}}>
<option value="-1">No Preference</option>
<option value="0">0 jobs</option>
<option value="1">less than or equal to 1 job</option>
<option value="2">less than or equal to 2 jobs</option>
<option value="3">less than or equal to 3 jobs</option>
<option value="4">less than or equal to 4 jobs</option>
<option value="5">greater than 4 jobs</option>
</select>
</Col>
<Col>
</Col>
<Col>
</Col>
</Row>
<Row className="p-2" style={{marginTop:5,fontSize:"14px",fontFamily: "Segoe UI",fontWeight:"600"}} align="left">
<Col style={{fontSize:15}}>Advance Filter</Col>
</Row>
<hr style={{margin:2,marginBottom:4}}></hr>
<Row style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="1" md="2" xs="12" className="p-2">
10th<br/>({this.state.tenth}-100)
</Col>
<Col lg="5" md="10" xs="12" className="p-2">
<input type="range" defaultValue="0" name="minten" id="minten" min="0" max="100" step="5" className="w-100" onChange={this.onChangetenth}/>
</Col>
<Col lg="1" md="2" xs="12" className="p-2">
12th<br/>({this.state.twelve}-100)
</Col>
<Col lg="5" md="10" xs="12" className="p-2">
<input type="range" defaultValue="0" name="mintwelve" id="mintwelve" min="0" max="100" step="5" className="w-100" onChange={this.onChangetwelve}/>
</Col>
</Row>
<Row style={{fontSize:"12px",fontFamily: "Segoe UI",fontWeight:"400",color:"#999999"}}>
<Col lg="1" md="2" xs="12" className="p-2">
Backlogs<br/>({this.state.backstate})
</Col>
<Col lg="5" md="10" xs="12" className="p-2">
<input type="range" name="backlogs" defaultValue="0" id="backlogs" min="-1" max="11" step="1" className="w-100" onChange={this.onChangeback}/>
</Col>
<Col></Col>
<Col></Col>
</Row>
<input type="submit" value="Submit" className="form-group btn btn-primary" style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B",padding:"6px 12px"}}/>
</form>
</Col>
</Row>
<Row style={{backgroundColor:'white'}}>
<Col align="right" styles={{padding:'10'}}>
<div>
<Button onClick={this.printDocument} variant="contained" color="secondary">Generate Pdf</Button>
<ReactHTMLTableToExcel
className="btn btn-secondary"
table="Data"
filename="Filtered Students"
sheet="Sheet1"
buttonText="Generate Excel"
style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}}
/>
</div>
</Col>
</Row>
<Row>
<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
<thead style={{backgroundColor:'#2A324B',color:'white'}}>
<tr>
<th>ID</th>
<th align="left">First_Name</th>
<th align="left">Middle_Name</th>
<th align="left">Last_Name</th>
<th>Branch</th>
<th>X Marks</th>
<th>XII Marks</th>
<th>College Marks</th>
<th>Batch</th>
</tr>
</thead>
<tbody>
{this.StudentsList()}
</tbody>
</Table>
</Row>
</Container>
</div>
);
}
Example #12
| Source File: Component.js From agenda with MIT License | 4 votes |
|
render() {
const {modalFlag} = this.state;
const {
assignment, assignments
} = this.props;
return (
<Container>
<Row>
<Col>
<Button
className="float-right"
color="primary"
size="lg"
tag={Link}
to="/assignments/new"
>
Nueva asignación
</Button>
</Col>
</Row>
<hr/>
<Row>
<Col>
<Table bordered condensed hover stripped size="sm">
<thead>
<tr>
<th colSpan="4">Contacto</th>
<th colSpan="3">Departamento</th>
<th rowSpan="2">Acciones</th>
</tr>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Direccion</th>
<th>Cargo</th>
<th>Nombre</th>
<th>Dirección</th>
<th>Decripción</th>
</tr>
</thead>
<tbody>
{assignments.map(assignment => (
<tr>
<td>{assignment.firstName}</td>
<td>{assignment.lastName}</td>
<td>{assignment.address}</td>
<td>{assignment.role}</td>
<td>{assignment.name}</td>
<td>{assignment.departmentAddress}</td>
<td>{assignment.description}</td>
<td className="text-center">
<ButtonGroup>
<Button tag={Link} to={`/assignments/${assignment.id}`}>
<FontAwesomeIcon icon={faEdit}/>
</Button>
<Button
onClick={() => this.handleModal(true, assignment)}
color="danger"
>
<FontAwesomeIcon icon={faTrash}/>
</Button>
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
{modalFlag && (
<ModalConfirm
title="Confirme borrado"
message="Estas por borrar una Asignacion"
onDismiss={() => this.handleModal(null)}
onAccept={() => this.onDelete(assignment)}
>
<div> Testing </div>
</ModalConfirm>
)}
</Container>
);
}
Example #13
| Source File: TableContainer.js From RT7-example with MIT License | 4 votes |
|
TableContainer = ({ columns, data, renderRowSubComponent }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
visibleColumns,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn: { Filter: DefaultColumnFilter },
initialState: { pageIndex: 0, pageSize: 10 },
},
useFilters,
useSortBy,
useExpanded,
usePagination
);
const generateSortingIndicator = (column) => {
return column.isSorted ? (column.isSortedDesc ? ' ?' : ' ?') : '';
};
const onChangeInSelect = (event) => {
setPageSize(Number(event.target.value));
};
const onChangeInInput = (event) => {
const page = event.target.value ? Number(event.target.value) - 1 : 0;
gotoPage(page);
};
return (
<Fragment>
<Table bordered hover {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
<div {...column.getSortByToggleProps()}>
{column.render('Header')}
{generateSortingIndicator(column)}
</div>
<Filter column={column} />
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<Fragment key={row.getRowProps().key}>
<tr>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
);
})}
</tr>
{row.isExpanded && (
<tr>
<td colSpan={visibleColumns.length}>
{renderRowSubComponent(row)}
</td>
</tr>
)}
</Fragment>
);
})}
</tbody>
</Table>
<Row style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
<Col md={3}>
<Button
color='primary'
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{'<<'}
</Button>
<Button
color='primary'
onClick={previousPage}
disabled={!canPreviousPage}
>
{'<'}
</Button>
</Col>
<Col md={2} style={{ marginTop: 7 }}>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
</Col>
<Col md={2}>
<Input
type='number'
min={1}
style={{ width: 70 }}
max={pageOptions.length}
defaultValue={pageIndex + 1}
onChange={onChangeInInput}
/>
</Col>
<Col md={2}>
<CustomInput
type='select'
value={pageSize}
onChange={onChangeInSelect}
>
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</CustomInput>
</Col>
<Col md={3}>
<Button color='primary' onClick={nextPage} disabled={!canNextPage}>
{'>'}
</Button>
<Button
color='primary'
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{'>>'}
</Button>
</Col>
</Row>
</Fragment>
);
}
Example #14
| Source File: Dashboard.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<div className={s.root}>
<h1 className="page-title">
Dashboard
<small>
<small>The Lucky One</small>
</small>
</h1>
<Row>
<Col lg={7}>
<Widget className="bg-transparent">
<Map />
</Widget>
</Col>
<Col lg={1} />
<Col lg={4}>
<Widget
className="bg-transparent"
title={
<h5>
{" "}
Map
<span className="fw-semi-bold"> Statistics</span>
</h5>
}
settings
refresh
close
>
<p>
Status: <strong>Live</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-map-marker" />
</span>{" "}
146 Countries, 2759 Cities
</p>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Foreign Visits</h6>
<p className="description deemphasize mb-xs text-white">
Some Cool Text
</p>
<Progress
color="primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={75} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Local Visits</h6>
<p className="description deemphasize mb-xs text-white">
P. to C. Conversion
</p>
<Progress
color="danger"
value="39"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={84} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Sound Frequencies</h6>
<p className="description deemphasize mb-xs text-white">
Average Bitrate
</p>
<Progress
color="success"
value="80"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={92} />%
</small>
</span>
</div>
</div>
<h6 className="fw-semi-bold mt">Map Distributions</h6>
<p>
Tracking: <strong>Active</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-cog" />
</span>
391 elements installed, 84 sets
</p>
<div className="input-group mt">
<input
type="text"
className="form-control bg-custom-dark border-0"
placeholder="Search Map"
/>
<span className="input-group-btn">
<button
type="submit"
className={`btn btn-subtle-blue ${s.searchBtn}`}
>
<i className="fa fa-search text-light" />
</button>
</span>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> USERBASE GROWTH </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">76.38%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">10.38%</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">3.38%</p>
</div>
</div>
<Progress
color="success"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-up" />
</span>
</small>
<span className="fw-semi-bold"> 17% higher</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> TRAFFIC VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Values</h6>
<p className="value">17 567 318</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">55 120</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">9 695</p>
</div>
</div>
<Progress
color="danger"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-down" />
</span>
</small>
<span className="fw-semi-bold"> 8% lower</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> RANDOM VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name fs-sm">Overcome T.</h6>
<p className="value">104.85%</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">Takeoff Angle</h6>
<p className="value">14.29°</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">World Pop.</h6>
<p className="value">7,211M</p>
</div>
</div>
<Progress
color="bg-primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-plus" />
</span>
</small>
<span className="fw-semi-bold"> 8 734 higher</span>
than last month
</p>
</Widget>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
<span className="badge badge-success mr-2">New</span> Messages
</h6>
}
refresh
close
>
<div className="widget-body undo_padding">
<div className="list-group list-group-lg">
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA2}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Chris Gray</h6>
<p className="help-block text-ellipsis m-0">
Hey! What's up? So many times since we
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA4}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Jamey Brownlow</h6>
<p className="help-block text-ellipsis m-0">
Good news coming tonight. Seems they agreed to proceed
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA1}
alt="..."
/>
<i className="status status-bottom bg-primary" />
</span>
<div>
<h6 className="m-0">Livia Walsh</h6>
<p className="help-block text-ellipsis m-0">
Check my latest email plz!
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA5}
alt="..."
/>
<i className="status status-bottom bg-danger" />
</span>
<div>
<h6 className="m-0">Jaron Fitzroy</h6>
<p className="help-block text-ellipsis m-0">
What about summer break?
</p>
</div>
</button>
</div>
</div>
<footer className="bg-widget-transparent mt">
<input
type="search"
className="form-control form-control-sm bg-custom-dark border-0"
placeholder="Search"
/>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
{" "}
Market <span className="fw-semi-bold">Stats</span>
</h6>
}
close
>
<div className="widget-body">
<h3>$720 Earned</h3>
<p className="fs-mini text-muted mb mt-sm">
Target <span className="fw-semi-bold">$820</span> day earnings
is <span className="fw-semi-bold">96%</span> reached.
</p>
</div>
<div className={`widget-table-overflow ${s.table}`}>
<Table striped size="sm">
<thead className="no-bd">
<tr>
<th>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox210"
type="checkbox"
onClick={() => this.checkTable(0)}
checked={this.state.checkedArr[0]}
readOnly
/>{" "}
<Label for="checkbox210" />
</div>
</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox212"
type="checkbox"
onClick={() => this.checkTable(1)}
checked={this.state.checkedArr[1]}
readOnly
/>{" "}
<Label for="checkbox212" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-align-right fw-semi-bold">$346.1</td>
</tr>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox214"
onClick={() => this.checkTable(2)}
type="checkbox"
checked={this.state.checkedArr[2]}
readOnly
/>{" "}
<Label for="checkbox214" />
</div>
</td>
<td>Air Pro</td>
<td className="text-align-right fw-semi-bold">$533.1</td>
</tr>
</tbody>
</Table>
</div>
<div
className="widget-body mt-xlg chart-overflow-bottom"
style={{ height: "100px" }}
>
<Rickshaw height={100} />
</div>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6>Calendar</h6>}
settings
close
bodyClass={"pt-2 px-0 py-0"}
>
<Calendar />
<div className="list-group fs-mini">
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-primary float-right">
6:45
</span>
Weed out the flower bed
</button>
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-success float-right">
9:41
</span>
Stop world water pollution
</button>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
Example #15
| Source File: Tables.js From sofia-react-template with MIT License | 4 votes |
|
Tables = function () {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [firstTable] = useState(mock.firstTable);
const [secondTable] = useState(mock.secondTable);
const [transactions, setTransactions] = useState(mock.transactionsWidget);
const [tasks, setTasks] = useState(mock.tasksWidget);
const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
const [tableDropdownOpen, setTableMenuOpen] = useState(false);
const pageSize = 4;
const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);
const setFirstTablePage = (e, index) => {
e.preventDefault();
setFirstTableCurrentPage(index);
}
const setSecondTablePage = (e, index) => {
e.preventDefault();
setSecondTableCurrentPage(index);
}
const toggle = () => {
setDropdownOpen(!dropdownOpen);
}
const transactionMenuOpen = (id) => {
setTransactions(
transactions.map( transaction => {
if (transaction.id === id) {
transaction.dropdownOpen = !transaction.dropdownOpen;
}
return transaction;
})
)
}
const tableMenuOpen = () => {
setTableMenuOpen(!tableDropdownOpen);
}
const toggleTask = (id) => {
setTasks(
tasks.map( task => {
if (task.id === id) {
task.completed = !task.completed;
}
return task;
})
)
}
return (
<div>
<Row>
<Col>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">States Colors</div>
<div className="d-flex">
<a href="/#"><img src={searchIcon} alt="Search"/></a>
<a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
<a href="/#"><img src={printerIcon} alt="Printer" /></a>
<a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
<a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
</div>
</div>
<div className="widget-table-overflow">
<Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
<thead>
<tr>
<th className={s.checkboxCol}>
<div className="checkbox checkbox-primary">
<input
className="styled"
id="checkbox100"
type="checkbox"
/>
<label for="checkbox100"/>
</div>
</th>
<th className="w-25">NAME</th>
<th className="w-25">COMPANY</th>
<th className="w-25">CITY</th>
<th className="w-25">STATE</th>
</tr>
</thead>
<tbody>
{firstTable
.slice(
firstTableCurrentPage * pageSize,
(firstTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<Label for={item.id} />
</div>
</td>
<td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
<td>{item.company}</td>
<td>{item.city}</td>
<td>{item.state}</td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-borderless" aria-label="Page navigation example">
<PaginationItem disabled={firstTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(firstTablePagesCount)].map((page, i) =>
<PaginationItem active={i === firstTableCurrentPage} key={i}>
<PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Material UI table</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={tableDropdownOpen}
toggle={() => tableMenuOpen()}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="widget-table-overflow">
<Table className="table-striped table-borderless table-hover" responsive>
<thead>
<tr>
<th>
<div className="checkbox checkbox-primary">
<input
id="checkbox200"
className="styled"
type="checkbox"
/>
<label for="checkbox200"/>
</div>
</th>
<th className={s.nameCol}>NAME</th>
<th>EMAIL</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>DATE</th>
<th>CITY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
{secondTable
.slice(
secondTableCurrentPage * pageSize,
(secondTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<label for={item.id} />
</div>
</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.product}</td>
<td>{item.price}</td>
<td>{item.date}</td>
<td>{item.city}</td>
<td><Badge color={item.color}>{item.status}</Badge></td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-with-border">
<PaginationItem disabled={secondTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(secondTablePagesCount)].map((page, i) =>
<PaginationItem active={i === secondTableCurrentPage} key={i}>
<PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} xl={8} className="pr-grid-col">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Recent transaction</div>
<div>
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggle}
className=""
>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
{/*<img src="" alt="Filter option"/>*/}
</div>
</div>
<div className={s.widgetContentBlock}>
{transactions.map(item => (
<div key={uuidv4()} className={s.content}>
<div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
<div className="body-3 muted d-none d-md-block">{item.date}</div>
<div className="body-2">{item.price}</div>
<div className="body-3 muted d-none d-lg-block">{item.description}</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={item.dropdownOpen}
toggle={() => transactionMenuOpen(item.id)}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
))}
</div>
</Widget>
</Col>
<Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Tasks</div>
</div>
<div className={s.widgetContentBlock}>
<TaskContainer tasks={tasks} toggleTask={toggleTask} />
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
Example #16
| Source File: Sources.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Col lg={12}>
<Card>
<CardBody>
<Dropdown className="float-right" isOpen={this.state.menu} toggle={() => this.setState({ menu: !this.state.menu })} >
<DropdownToggle tag="i" className="arrow-none card-drop">
<i className="mdi mdi-dots-vertical"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="">Sales Report</DropdownItem>
<DropdownItem href="">Export Report</DropdownItem>
<DropdownItem href="">Profit</DropdownItem>
<DropdownItem href="">Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<h4 className="card-title mb-3">Sources</h4>
<div>
<div className="text-center">
<p className="mb-2">Total sources</p>
<h4>$ 7652</h4>
<div className="text-success">
<i className="mdi mdi-menu-up font-size-14"> </i>2.2 %
</div>
</div>
<div className="table-responsive mt-4">
<Table hover className=" mb-0 table-centered table-nowrap">
<tbody>
<tr>
<td style={{ width: "60px" }}>
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
<img src={img1} alt="" height="20" />
</div>
</div>
</td>
<td>
<h5 className="font-size-14 mb-0">Source 1</h5>
</td>
<td><div id="spak-chart1"></div></td>
<td>
<p className="text-muted mb-0">$ 2478</p>
</td>
</tr>
<tr>
<td>
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
<img src={img2} alt="" height="20" />
</div>
</div>
</td>
<td>
<h5 className="font-size-14 mb-0">Source 2</h5>
</td>
<td><div id="spak-chart2"></div></td>
<td>
<p className="text-muted mb-0">$ 2625</p>
</td>
</tr>
<tr>
<td>
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
<img src={img3} alt="" height="20" />
</div>
</div>
</td>
<td>
<h5 className="font-size-14 mb-0">Source 3</h5>
</td>
<td><div id="spak-chart3"></div></td>
<td>
<p className="text-muted mb-0">$ 2856</p>
</td>
</tr>
</tbody>
</Table>
</div>
<div className="text-center mt-4">
<Link to="#" className="btn btn-primary btn-sm">View more</Link>
</div>
</div>
</CardBody>
</Card>
</Col>
</React.Fragment>
);
}
Example #17
| Source File: index.js From hackchat-client with Do What The F*ck You Want To Public License | 4 votes |
|
/* eslint-disable react/prop-types */
MessageFormatter.renderer = new RemarkableReactRenderer({
components: {
a: ({ href, title, children }) => {
const html = `<a href="${href}" target="_blank" title="${title}" rel="noopener noreferrer">${children}</a>`;
return (
<span
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(html, { ADD_ATTR: ['target'] }),
}}
/>
);
},
img: ({ alt, src, title }) => {
const html = `<a href="${src}" target="_blank" title="${
title || alt
}" rel="noopener noreferrer">${src}</a>`;
return (
<span
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(html, { ADD_ATTR: ['target'] }),
}}
/>
);
},
table: ({ children }) => (
<Table dark striped>
{children}
</Table>
),
p: ({ children }) => {
const alteredChildren = [];
for (let i = 0, j = children.length; i < j; i += 1) {
if (typeof children[i] === 'string') {
if (children[i].indexOf('?') !== -1) {
const chunks = children[i].split(/(\?\S*)/gm);
for (let k = 0, l = chunks.length; k < l; k += 1) {
if (chunks[k][0] === '?') {
const key = `invite-${Math.random() * 9999}`;
alteredChildren.push(
<Link key={key} to={`/${DOMPurify.sanitize(chunks[k])}`}>
{DOMPurify.sanitize(chunks[k])}
</Link>,
);
} else if (chunks[k] !== '') {
alteredChildren.push(chunks[k]);
}
}
} else {
alteredChildren.push(children[i]);
}
} else {
alteredChildren.push(children[i]);
}
}
return <p>{alteredChildren}</p>;
},
pre: ({ content, params: language }) => {
if (hljs.getLanguage(language)) {
try {
return (
<pre
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: hljs.highlight(language, content).value,
}}
/>
);
} catch (__) {
// Yolo error handling
}
}
try {
return (
<pre
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: hljs.highlightAuto(content).value,
}}
/>
);
} catch (__) {
// You're changing the outcome by measuring the result, stop counting errors
}
return '';
},
katex_block: (token) => <BlockMath>{token.content}</BlockMath>,
katex_inline: (token) => <InlineMath>{token.content}</InlineMath>,
},
});
Example #18
| Source File: Switches.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch default
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} checked />
<AppSwitch className={'mx-1'} color={'secondary'} checked />
<AppSwitch className={'mx-1'} color={'success'} checked />
<AppSwitch className={'mx-1'} color={'warning'} checked />
<AppSwitch className={'mx-1'} color={'info'} checked />
<AppSwitch className={'mx-1'} color={'danger'} checked />
<AppSwitch className={'mx-1'} color={'light'} checked />
<AppSwitch className={'mx-1'} color={'dark'} checked />
<AppSwitch className={'mx-1'} color={'primary'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch pills
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>disabled</code></small>
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline="alt"</code></small>
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} outline={'alt'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>label</code></small>
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline="alt" label</code></small>
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline="alt" label</code></small>
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch outline
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline checked />
<AppSwitch className={'mx-1'} color={'secondary'} outline checked />
<AppSwitch className={'mx-1'} color={'success'} outline checked />
<AppSwitch className={'mx-1'} color={'warning'} outline checked />
<AppSwitch className={'mx-1'} color={'info'} outline checked />
<AppSwitch className={'mx-1'} color={'danger'} outline checked />
<AppSwitch className={'mx-1'} color={'light'} outline checked />
<AppSwitch className={'mx-1'} color={'dark'} outline checked />
<AppSwitch className={'mx-1'} color={'primary'} outline disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch outline pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch outline alternative
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch outline alternative - pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} label checked />
<AppSwitch className={'mx-1'} color={'secondary'} label checked />
<AppSwitch className={'mx-1'} color={'success'} label checked />
<AppSwitch className={'mx-1'} color={'warning'} label checked />
<AppSwitch className={'mx-1'} color={'info'} label checked />
<AppSwitch className={'mx-1'} color={'danger'} label checked />
<AppSwitch className={'mx-1'} color={'light'} label checked />
<AppSwitch className={'mx-1'} color={'dark'} label checked />
<AppSwitch className={'mx-1'} color={'primary'} label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline label checked />
<AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
<AppSwitch className={'mx-1'} color={'success'} outline label checked />
<AppSwitch className={'mx-1'} color={'warning'} outline label checked />
<AppSwitch className={'mx-1'} color={'info'} outline label checked />
<AppSwitch className={'mx-1'} color={'danger'} outline label checked />
<AppSwitch className={'mx-1'} color={'light'} outline label checked />
<AppSwitch className={'mx-1'} color={'dark'} outline label checked />
<AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Switch with text outline alternative pills
{' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
Sizes
</CardHeader>
<CardBody className="p-0">
<Table hover striped className="table-align-middle mb-0">
<thead>
<tr>
<th>Size</th>
<th>Example</th>
<th>Props</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Large
</td>
<td>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
</td>
<td>
Add <code>size={'lg'}</code>
</td>
</tr>
<tr>
<td>
Normal
</td>
<td>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked />
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Small
</td>
<td>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
</td>
<td>
Add <code>size={'sm'}</code>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
