semantic-ui-react#Pagination JavaScript Examples
The following examples show how to use
semantic-ui-react#Pagination.
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: index.js From pokedex-old with MIT License | 5 votes |
|
PokemonList = () => {
const [pokemons, setPokemons] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [totalPokemon] = useState(807);
const [pokemonPerPage] = useState(54);
const [currentPage, setCurrentPage] = useState(0);
const [query, setQuery] = useState("");
useEffect(() => {
const fetchPokemons = async () => {
await api
.get(`/pokemon?limit=${pokemonPerPage}&offset=${currentPage}`)
.then((response) => {
setPokemons(response.data.results);
});
setIsLoading(false);
};
fetchPokemons();
}, [currentPage, pokemonPerPage]);
const onPaginationClick = (e, pageInfo) => {
setCurrentPage(pageInfo.activePage * pokemonPerPage - pokemonPerPage);
};
const totalPage = Math.ceil(totalPokemon / pokemonPerPage);
const renderPokemonsList = () => {
const pokemonsList = [];
pokemons.forEach((pokemon) => {
if (!pokemon.name.includes(query)) {
return;
}
pokemonsList.push(<PokemonCard key={pokemon.name} pokemon={pokemon} />);
});
return pokemonsList;
};
return isLoading ? (
<Pokeball />
) : (
<>
<Search getQuery={(q) => setQuery(q)} />
<PaginationContainer>
<Pagination
defaultActivePage={1}
totalPages={totalPage}
onPageChange={onPaginationClick}
/>
</PaginationContainer>
<App>
{/* {pokemons.map((pokemon) => (
<PokemonCard key={pokemon.name} pokemon={pokemon} />
))} */}
{renderPokemonsList()}
</App>
</>
);
}
Example #2
| Source File: ResultsTable.js From vch-mri with MIT License | 5 votes |
|
render() {
return (
<Table celled compact sortable>
<Table.Header fullWidth>
<Table.Row>
<Table.HeaderCell
sorted={this.props.sortedColumn === 'id' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('id');}}
>reqCIO</Table.HeaderCell>
<Table.HeaderCell
collapsing
sorted={this.props.sortedColumn === 'rules_id' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('rules_id');}}
>Rule ID</Table.HeaderCell>
<Table.HeaderCell
collapsing
sorted={this.props.sortedColumn === 'priority' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('priority');}}
>Priority</Table.HeaderCell>
<Table.HeaderCell
collapsing
sorted={this.props.sortedColumn === 'contrast' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('contrast');}}
>Contrast</Table.HeaderCell>
<Table.HeaderCell
collapsing
sorted={this.props.sortedColumn === 'p5_flag' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('p5_flag');}}
>P5 Flag</Table.HeaderCell>
<Table.HeaderCell
sorted={this.props.sortedColumn === 'phys_priority' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('phys_priority');}}
>Physician Priority</Table.HeaderCell>
<Table.HeaderCell
sorted={this.props.sortedColumn === 'phys_contrast' ? this.props.sortDirection : null}
onClick={() => {this.props.changeResultSort('phys_contrast');}}
>Physician Contrast</Table.HeaderCell>
<Table.HeaderCell>Tags</Table.HeaderCell>
<Table.HeaderCell>Date Created</Table.HeaderCell>
<Table.HeaderCell collapsing/>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.results.map((result, index) =>
<ResultsTableRow result={result}/>
)}
</Table.Body>
<Table.Footer fullWidth>
<Table.Row>
<Table.HeaderCell colSpan='10'>
{this.props.totalPages &&
<Pagination
floated='right'
defaultActivePage={this.state.activePage}
onPageChange={this.handlePaginationChange}
totalPages={this.props.totalPages}
/>}
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
)
}
Example #3
| Source File: CoreDetailEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
CoreDetailEvent = observer((props) => {
const classes = useStyles();
const { events } = props
const { clusterStore } = store;
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
useEffect(() => {
return () => {
};
}, []);
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
if (eventData === null) {
eventData = []
}
let total_page
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
let eventList = []
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
{item.type === "Normal" ? <div className={classes.alert}><Alert severity="success">Message: {item.message}</Alert></div> :
item.type === "Waring" ? <div className={classes.alert}><Alert severity="warning">Message: {item.message}</Alert></div> :
<div className={classes.alert}><Alert severity="error">Message: {item.message}</Alert></div>
}
{/* <div className={classes.alert}><Alert severity="success">This is an error alert — check it out!</Alert></div> */}
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<h5>Kind: {item.kind}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>name: {item.name}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>namespace: {item.namespace}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>reason: {item.reason}</h5>
</Grid>
<Grid item xs={12} sm={12}>
<h5>Time: {item.eventTime}</h5>
</Grid>
</Grid>
</div>
</AccordionDetails >
</Accordion >
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
< Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<div className={classes.alert}><Alert severity="info">No Have Events List</Alert></div>
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={12} >
<h5>No Event</h5>
</Grid>
</Grid>
</div>
</AccordionDetails>
</Accordion >
)
})
}
return (
<React.Fragment>
<hr />
<div className={classes.alert}><Alert severity="info">이벤트</Alert></div>
<hr />
{eventList}
{/* <div className="table-responsive">
<Table responsive >
<thead>
<tr>
<th style={{ width: "100%" }} ><div className={classes.alert}><Alert severity="info">이벤트</Alert></div></th>
</tr>
</thead>
<tbody>
<div className={classes.root}>
{eventList}
</div>
</tbody>
</Table>
</div> */}
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
})
Example #4
| Source File: EdgeDetailEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
EdgeDetailEvent = observer((props) => {
const classes = useStyles();
const { events } = props
const { clusterStore } = store;
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
useEffect(() => {
return () => {
};
}, []);
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
if (eventData === undefined || eventData === null) {
eventData = []
}
// console.log(eventData)
let total_page
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
let eventList = []
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
{item.type === "Normal" ? <div className={classes.alert}><Alert severity="success">Message: {item.message}</Alert></div> :
item.type === "Waring" ? <div className={classes.alert}><Alert severity="warning">Message: {item.message}</Alert></div> :
<div className={classes.alert}><Alert severity="error">Message: {item.message}</Alert></div>
}
{/* <div className={classes.alert}><Alert severity="success">This is an error alert — check it out!</Alert></div> */}
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<h5>Kind: {item.kind}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>name: {item.name}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>namespace: {item.namespace}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>reason: {item.reason}</h5>
</Grid>
<Grid item xs={12} sm={12}>
<h5>Time: {item.eventTime}</h5>
</Grid>
</Grid>
</div>
</AccordionDetails >
</Accordion >
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
< Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<div className={classes.alert}><Alert severity="info">No Have Events List</Alert></div>
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={12} >
<h5>No Event</h5>
</Grid>
</Grid>
</div>
</AccordionDetails>
</Accordion >
)
})
}
return (
<React.Fragment>
<hr />
<div className={classes.alert}><Alert severity="info">이벤트</Alert></div>
<hr />
{eventList}
{/* <div className="table-responsive">
<Table responsive >
<thead>
<tr>
<th style={{ width: "100%" }} ><div className={classes.alert}><Alert severity="info">이벤트</Alert></div></th>
</tr>
</thead>
<tbody>
<div className={classes.root}>
{eventList}
</div>
</tbody>
</Table>
</div> */}
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
})
Example #5
| Source File: ProjectEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ProjectEvent = observer((props) => {
const classes = useStyles();
const { events } = props
const { clusterStore } = store;
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
useEffect(() => {
return () => {
};
}, []);
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
if (eventData === null) {
eventData = []
}
let total_page
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
let eventList = []
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<tr>
<th>
{item.type === "Normal" ? <Alert severity="success">Message: {item.message}</Alert> :
item.type === "Waring" ? <Alert severity="warning">Message: {item.message}</Alert> :
<Alert severity="error">Message: {item.message}</Alert>
}
</th>
</tr>
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
<tr>
<th>
<Alert severity="info">No Have Events List</Alert>
</th>
</tr>
)
})
}
return (
<React.Fragment>
<hr />
<Alert severity="info">이벤트</Alert>
<hr />
<Table id="tech-companies-1" hover bordered responsive>
<thead>
{/* <tr>
<th data-priority="1"><Alert severity="info">이벤트</Alert></th>
</tr> */}
</thead>
<tbody>
{eventList}
</tbody>
</Table>
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='mini' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
})
Example #6
| Source File: DeploymentEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
DeploymentEvent = observer((props) => {
const classes = useStyles();
const { events } = props
const { clusterStore } = store;
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
useEffect(() => {
return () => {
};
}, []);
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
if (eventData === null) {
eventData = []
}
let total_page
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
let eventList = []
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<tr>
<th>
{item.type === "Normal" ? <Alert severity="success">Message: {item.message}</Alert> :
item.type === "Waring" ? <Alert severity="warning">Message: {item.message}</Alert> :
<Alert severity="error">Message: {item.message}</Alert>
}
</th>
</tr>
// <Accordion>
// <AccordionSummary
// expandIcon={<ExpandMoreIcon />}
// aria-controls="panel1a-content"
// id="panel1a-header"
// >
// {item.type === "Normal" ? <div className={classes.alert}><Alert severity="success">Message: {item.message}</Alert></div> :
// item.type === "Waring" ? <div className={classes.alert}><Alert severity="warning">Message: {item.message}</Alert></div> :
// <div className={classes.alert}><Alert severity="error">Message: {item.message}</Alert></div>
// }
// {/* <div className={classes.alert}><Alert severity="success">This is an error alert — check it out!</Alert></div> */}
// </AccordionSummary>
// <AccordionDetails>
// <Table id="tech-companies-1" striped bordered responsive>
// <thead>
// <tr>
// <th data-priority="1">Kind</th>
// <th data-priority="3">Name</th>
// <th data-priority="3">Namespace</th>
// <th data-priority="3">reason</th>
// <th data-priority="3">Time</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <th>{item.kind} </th>
// <td>{item.name}</td>
// <td>{item.namespace}</td>
// <td>{item.reason}</td>
// <td>{item.eventTime}</td>
// </tr>
// </tbody>
// </Table>
// <div style={{ flexGrow: 1 }}>
// <Grid container spacing={1}>
// <Grid item xs={12} sm={6}>
// <h5>Kind: {item.kind}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>name: {item.name}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>namespace: {item.namespace}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>reason: {item.reason}</h5>
// </Grid>
// <Grid item xs={12} sm={12}>
// <h5>Time: {item.eventTime}</h5>
// </Grid>
// </Grid>
// </div>
// </AccordionDetails >
// </Accordion >
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
<tr>
<th>
<Alert severity="info">No Have Events List</Alert>
</th>
</tr>
// < Accordion >
// <AccordionSummary
// expandIcon={<ExpandMoreIcon />}
// aria-controls="panel1a-content"
// id="panel1a-header"
// >
// <div className={classes.alert}><Alert severity="info">No Have Events List</Alert></div>
// </AccordionSummary>
// <AccordionDetails>
// <div style={{ flexGrow: 1 }}>
// <Grid container spacing={1}>
// <Grid item xs={12} >
// <h5>No Event</h5>
// </Grid>
// </Grid>
// </div>
// </AccordionDetails>
// </Accordion >
)
})
}
return (
<React.Fragment>
<hr />
<Alert severity="info">이벤트</Alert>
<hr />
<Table id="tech-companies-1" hover bordered responsive>
<thead>
{/* <tr>
<th data-priority="1"><Alert severity="info">이벤트</Alert></th>
</tr> */}
</thead>
<tbody>
{eventList}
</tbody>
</Table>
{/* {eventList} */}
{/* <div className="table-responsive">
<Table responsive >
<thead>
<tr>
<th style={{ width: "100%" }} ><div className={classes.alert}><Alert severity="info">이벤트</Alert></div></th>
</tr>
</thead>
<tbody>
<div className={classes.root}>
{eventList}
</div>
</tbody>
</Table>
</div> */}
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='mini' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
})
Example #7
| Source File: PodDetailEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
export default function Event(props) {
const classes = useStyles();
const { apilistinfo } = props
console.log(apilistinfo, "test");
console.log(apilistinfo.events, "event info");
let events = apilistinfo.events
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
let eventList = []
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
let total_page
console.log(eventData)
if (eventData == undefined) {
eventData = []
}
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<div key={idx}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
{item.type === "Normal" ? <div className={classes.alert}><Alert severity="success">Message: {item.message}</Alert></div> :
item.type === "Waring" ? <div className={classes.alert}><Alert severity="warning">Message: {item.message}</Alert></div> :
<div className={classes.alert}><Alert severity="error">Message: {item.message}</Alert></div>
}
{/* <div className={classes.alert}><Alert severity="success">This is an error alert — check it out!</Alert></div> */}
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1, padding: "10px 10px 10px" }}>
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<h5>Kind: {item.kind}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>name: {item.name}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>namespace: {item.namespace}</h5>
</Grid>
<Grid item xs={12} sm={6}>
<h5>reason: {item.reason}</h5>
</Grid>
<Grid item xs={12} sm={12}>
<h5>Time: {item.eventTime}</h5>
</Grid>
</Grid>
</div>
</AccordionDetails >
</Accordion >
</div>
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
<div key={idx}>
< Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<div className={classes.alert}><Alert severity="info">No Have Events List</Alert></div>
</AccordionSummary>
<AccordionDetails>
<div style={{ flexGrow: 1, padding: "10px 10px 10px" }}>
<Grid container spacing={1}>
<Grid item xs={12} >
<h5>No Event</h5>
</Grid>
</Grid>
</div>
</AccordionDetails>
</Accordion >
</div>
)
})
}
return (
<React.Fragment>
<div className="table-responsive"> <div>
<div className={classes.alert}><Alert severity="info">이벤트</Alert></div>
</div>
<div>
<div className={classes.root}>
{eventList}
</div>
</div>
</div>
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
}
Example #8
| Source File: ServiceDetailEvent.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ServiceDetailEvent = observer((props) => {
const classes = useStyles();
const { events } = props
const { clusterStore } = store;
const [activePage, setActivePage] = React.useState(1);
const [expanded, setExpanded] = React.useState(false);
useEffect(() => {
return () => {
};
}, []);
const handlePaginationChange = (event, activePage) => {
// console.log(activePage.activePage)
setActivePage(activePage.activePage)
}
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
let eventData = events
if (eventData === null || eventData === undefined) {
eventData = []
}
let total_page
console.log(eventData)
if (eventData.length > 0) {
total_page = Math.ceil(eventData.length / 5)
}
else {
total_page = 1
}
let eventList = []
if (eventData.length > 0) {
eventList = eventData.map((item, idx) => {
if ((activePage - 1) * 5 <= idx)
if (idx <= activePage * 5)
return (
<tr>
<th>
{item.type === "Normal" ? <Alert severity="success">Message: {item.message}</Alert> :
item.type === "Waring" ? <Alert severity="warning">Message: {item.message}</Alert> :
<Alert severity="error">Message: {item.message}</Alert>
}
</th>
</tr>
// <Accordion>
// <AccordionSummary
// expandIcon={<ExpandMoreIcon />}
// aria-controls="panel1a-content"
// id="panel1a-header"
// >
// {item.type === "Normal" ? <div className={classes.alert}><Alert severity="success">Message: {item.message}</Alert></div> :
// item.type === "Waring" ? <div className={classes.alert}><Alert severity="warning">Message: {item.message}</Alert></div> :
// <div className={classes.alert}><Alert severity="error">Message: {item.message}</Alert></div>
// }
// {/* <div className={classes.alert}><Alert severity="success">This is an error alert — check it out!</Alert></div> */}
// </AccordionSummary>
// <AccordionDetails>
// <Table id="tech-companies-1" striped bordered responsive>
// <thead>
// <tr>
// <th data-priority="1">Kind</th>
// <th data-priority="3">Name</th>
// <th data-priority="3">Namespace</th>
// <th data-priority="3">reason</th>
// <th data-priority="3">Time</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <th>{item.kind} </th>
// <td>{item.name}</td>
// <td>{item.namespace}</td>
// <td>{item.reason}</td>
// <td>{item.eventTime}</td>
// </tr>
// </tbody>
// </Table>
// <div style={{ flexGrow: 1 }}>
// <Grid container spacing={1}>
// <Grid item xs={12} sm={6}>
// <h5>Kind: {item.kind}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>name: {item.name}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>namespace: {item.namespace}</h5>
// </Grid>
// <Grid item xs={12} sm={6}>
// <h5>reason: {item.reason}</h5>
// </Grid>
// <Grid item xs={12} sm={12}>
// <h5>Time: {item.eventTime}</h5>
// </Grid>
// </Grid>
// </div>
// </AccordionDetails >
// </Accordion >
)
})
}
else {
eventData = [{}]
eventList = eventData.map((item, idx) => {
return (
<tr>
<th>
<Alert severity="info">No Have Events List</Alert>
</th>
</tr>
// < Accordion >
// <AccordionSummary
// expandIcon={<ExpandMoreIcon />}
// aria-controls="panel1a-content"
// id="panel1a-header"
// >
// <div className={classes.alert}><Alert severity="info">No Have Events List</Alert></div>
// </AccordionSummary>
// <AccordionDetails>
// <div style={{ flexGrow: 1 }}>
// <Grid container spacing={1}>
// <Grid item xs={12} >
// <h5>No Event</h5>
// </Grid>
// </Grid>
// </div>
// </AccordionDetails>
// </Accordion >
)
})
}
return (
<React.Fragment>
{/* <hr />
<div className={classes.alert}><Alert severity="info">이벤트</Alert></div> */}
<hr />
<Alert severity="info">이벤트</Alert>
<hr />
<Table id="tech-companies-1" hover bordered responsive>
<thead>
{/* <tr>
<th data-priority="1"><Alert severity="info">이벤트</Alert></th>
</tr> */}
</thead>
<tbody>
{eventList}
</tbody>
</Table>
{/* {eventList} */}
{/* <div className="table-responsive">
<Table responsive >
<thead>
<tr>
<th style={{ width: "100%" }} ><div className={classes.alert}><Alert severity="info">이벤트</Alert></div></th>
</tr>
</thead>
<tbody>
<div className={classes.root}>
{eventList}
</div>
</tbody>
</Table>
</div> */}
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
<Pagination size='mini' totalPages={total_page} activePage={activePage} onPageChange={handlePaginationChange} />
</div>
</React.Fragment >
)
})
Example #9
| Source File: AppMain.js From jee-dashboard with GNU General Public License v3.0 | 4 votes |
|
render () {
const {
data,
year,
round_no,
institute_type,
quota,
currPage,
count,
search,
clickedColumn,
direction,
activeIndexs,
institute_short,
program,
duration,
degree,
category,
pool,
userrank,
userdelta
} = this.state
return (
<div className='app-main' id='scroll-to-filter'>
<Segment>
<div className='primary-filters-margin'>
<div className='year-type'>
<div
className={
isBrowser ? 'year-round-browser' : 'year-round-mobile'
}
>
<div>
<Button
content='Year'
color='facebook'
className='year-button'
/>
<Dropdown
name='year'
value={year}
placeholder='All'
selection
compact
options={yearDropDownOptions}
onChange={this.handleChange}
/>
</div>
{year === '2021' && (
<div>
<Button
className={
isBrowser
? 'round-button-browser'
: 'round-button-mobile'
}
content='Round'
color='facebook'
/>
<Dropdown
name='round_no'
value={round_no}
placeholder='Round no'
selection
compact
options={roundDropDownOptions}
onChange={this.handleChange}
/>
</div>
)}
</div>
<div className='year-type-margin'>
<Form>
<Form.Group className='form-group-margin-bottom'>
<Form.Field>
<Button content='College' color='facebook' />
</Form.Field>
<Form.Field>
<Radio
className='college-margin'
label='IIT'
name='institute_type'
value='IIT'
checked={institute_type === 'IIT'}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
<Radio
className='college-margin'
label='NIT'
name='institute_type'
value='NIT'
checked={institute_type === 'NIT'}
onChange={this.handleChange}
/>
</Form.Field>
</Form.Group>
</Form>
</div>
{institute_type === 'NIT' && (
<div className='year-type-margin'>
<Form>
<Form.Group className='form-group-margin-bottom'>
<Form.Field>
<Button
content='State'
color='facebook'
className='state-button'
/>
</Form.Field>
<Form.Field>
<Radio
className='college-margin'
label='HS'
name='quota'
value='HS'
checked={quota === 'HS'}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
<Radio
className='college-margin'
label='OS'
name='quota'
value='OS'
checked={quota === 'OS'}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
<Radio
className='college-margin'
label='Both'
name='quota'
value='All'
checked={quota === ''}
onChange={this.handleChange}
/>
</Form.Field>
</Form.Group>
</Form>
</div>
)}
</div>
<SemanticToastContainer />
</div>
<div className='year-note'>
To all the future JEE aspirants, Best of Luck! :))
</div>
</Segment>
<Accordion fluid styled>
<Accordion.Title
active={activeIndexs.includes(-1)}
index={-1}
onClick={this.handleAccordian}
>
<Icon name='dropdown' />
Instructions
</Accordion.Title>
<Accordion.Content active={activeIndexs.includes(-1)}>
<Message info list={instructions} />
</Accordion.Content>
<Accordion.Title
active={activeIndexs.includes(0)}
index={0}
onClick={this.handleAccordian}
>
<Icon name='dropdown' />
Primary Filters
</Accordion.Title>
<Accordion.Content active={activeIndexs.includes(0)}>
<div className={isBrowser ? 'secondary-filters' : null}>
<div className={isBrowser ? 'secondary-filters-col' : null}>
<div className='secondary-filters-margin'>
<Button content='Institute' color='facebook' />
<Dropdown
className='dropdown-filters'
name='institute_short'
value={institute_short}
placeholder='All'
selection
search
clearable
options={
this.state.institute_type === 'IIT'
? iitDropDownOptions
: nitDropDownOptions
}
onChange={this.handleChange}
/>
</div>
<div className='secondary-filters-margin'>
<Button content='Program' color='facebook' />
<Dropdown
className='dropdown-filters'
name='program'
value={program}
placeholder='All'
selection
search
clearable
options={
this.state.institute_type === 'IIT'
? iitProgramDropDownOptions
: nitProgramDropDownOptions
}
onChange={this.handleChange}
/>
</div>
</div>
<div className={isBrowser ? 'secondary-filters-col' : null}>
<div className='secondary-filters-margin'>
<Button content='Degree' color='facebook' />
<Dropdown
className='dropdown-filters'
name='degree'
value={degree}
placeholder='All'
selection
search
clearable
options={
this.state.institute_type === 'IIT'
? iitDegreeDropDownOptions
: nitDegreeDropDownOptions
}
onChange={this.handleChange}
/>
</div>
<div className='secondary-filters-margin'>
<Button content='Duration' color='facebook' />
<Dropdown
className='dropdown-filters'
name='duration'
value={duration}
placeholder='All'
selection
search
clearable
options={durationDropDownOptions}
onChange={this.handleChange}
/>
</div>
</div>
<div className={isBrowser ? 'secondary-filters-col' : null}>
<div className='secondary-filters-margin'>
<Button content='Pool' color='facebook' />
<Dropdown
className='dropdown-filters'
name='pool'
value={pool}
placeholder='All'
selection
search
clearable
options={poolDropDownOptions}
onChange={this.handleChange}
/>
</div>
<div className='secondary-filters-margin'>
<Button content='Category' color='facebook' />
<Dropdown
className='dropdown-filters'
name='category'
value={category}
placeholder='All'
selection
search
clearable
options={categoryDropDownOptions}
onChange={this.handleChange}
/>
</div>
</div>
</div>
</Accordion.Content>
<Accordion.Title
active={activeIndexs.includes(1)}
index={1}
onClick={this.handleAccordian}
>
<Icon name='dropdown' />
Personal Rank based search
</Accordion.Title>
<Accordion.Content active={activeIndexs.includes(1)}>
<div className='personalized-filter'>
<div className='personlized-filter-align'>
<Button
content={
institute_type === 'IIT' ? 'Adv. Rank' : 'Mains Rank'
}
color='blue'
/>
<Input
style={{ width: 130, height: 37 }}
type='number'
name='userrank'
value={userrank}
onChange={this.handlePersonalFilter}
placeholder='Enter your JEE Rank'
/>
</div>
<div className='personlized-filter-align'>
<Button content='Delta' color='blue' />
<Input
style={{ width: 130, height: 37 }}
type='number'
name='userdelta'
value={userdelta}
onChange={this.handlePersonalFilter}
placeholder='Enter prefered Delta'
/>
</div>
</div>
</Accordion.Content>
</Accordion>
<div className='reset-margin'>
<Button color='google plus' onClick={this.handleResetFilters}>
Reset Filters
</Button>
</div>
<div>
<div className='global-search'>
<Search
name='search'
value={search}
placeholder='Search by any keyword'
open={false}
fluid
onSearchChange={this.handleChange}
/>
</div>
</div>
<div className='table-overflow table-margin' id='scroll-ref'>
<Table celled color={'blue'} sortable unstackable>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>Sr.</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Year</Table.HeaderCell>
{year === '2021' && (
<Table.HeaderCell textAlign='center'>Round</Table.HeaderCell>
)}
<Table.HeaderCell
sorted={
clickedColumn === 'institute_short' ? direction : null
}
onClick={this.handleSort('institute_short')}
textAlign='center'
>
Institute
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'program_name' ? direction : null}
onClick={this.handleSort('program_name')}
textAlign='center'
>
Program
</Table.HeaderCell>
{institute_type === 'NIT' && (
<Table.HeaderCell textAlign='center'>Quota</Table.HeaderCell>
)}
<Table.HeaderCell
sorted={
clickedColumn === 'program_duration' ? direction : null
}
onClick={this.handleSort('program_duration')}
textAlign='center'
>
Duration
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'degree_short' ? direction : null}
onClick={this.handleSort('degree_short')}
textAlign='center'
>
Degree
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'category' ? direction : null}
onClick={this.handleSort('category')}
textAlign='center'
>
Category
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'pool' ? direction : null}
onClick={this.handleSort('pool')}
textAlign='center'
>
Pool
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'opening_rank' ? direction : null}
onClick={this.handleSort('opening_rank')}
textAlign='center'
>
Opening
</Table.HeaderCell>
<Table.HeaderCell
sorted={clickedColumn === 'closing_rank' ? direction : null}
onClick={this.handleSort('closing_rank')}
textAlign='center'
>
Closing
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{data.map(element => (
<Table.Row key={data.indexOf(element)}>
<Table.Cell collapsing textAlign='center'>
{data.indexOf(element) + 1 + 50 * (currPage - 1)}
</Table.Cell>
<Table.Cell collapsing textAlign='center'>
{element.year}
</Table.Cell>
{year === '2021' && (
<Table.Cell collapsing textAlign='center'>
{element.round_no}
</Table.Cell>
)}
<Table.Cell textAlign='center'>
{element.institute_short}
</Table.Cell>
<Table.Cell textAlign='center'>
{element.program_name}
</Table.Cell>
{institute_type === 'NIT' && (
<Table.Cell collapsing textAlign='center'>
{element.quota}
</Table.Cell>
)}
<Table.Cell collapsing textAlign='center'>
{element.program_duration}
</Table.Cell>
<Table.Cell textAlign='center'>
{element.degree_short}
</Table.Cell>
<Table.Cell collapsing textAlign='center'>
{element.category}
</Table.Cell>
<Table.Cell textAlign='center'>{element.pool}</Table.Cell>
<Table.Cell textAlign='center'>
{element.is_preparatory
? element.opening_rank + ' - P'
: element.opening_rank}
</Table.Cell>
<Table.Cell textAlign='center'>
{element.is_preparatory
? element.closing_rank + ' - P'
: element.closing_rank}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='10'>
<Pagination
activePage={currPage}
totalPages={data ? Math.ceil(count / 50) : '1'}
onClick={() =>
document.getElementById('scroll-ref').scrollIntoView()
}
onPageChange={this.handlePageChange}
firstItem={{
'aria-label': 'First item',
content: <Icon name='angle double left' />,
key: '1'
}}
prevItem={{
'aria-label': 'Previous item',
content: <Icon name='angle left' />,
key: '4'
}}
nextItem={{
'aria-label': 'Next item',
content: <Icon name='angle right' />,
key: '3'
}}
lastItem={{
'aria-label': 'Last item',
content: <Icon name='angle double right' />,
key: '2'
}}
/>
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
<Icon
className='scroll-to-top'
name='chevron circle up'
size='big'
color='grey'
onClick={() => {
document.getElementById('scroll-to-filter').scrollIntoView()
}}
/>
</div>
<div className='github-repo'>
*This is an open source project, if found helpful, do star{' '}
<a
href='https://github.com/nisarg73/jee-dashboard'
target='_blank'
rel='noopener noreferrer'
>
its github repo
</a>{' '}
:D
</div>
</div>
)
}
