semantic-ui-react#Accordion JavaScript Examples

render() {
    const { modelName } = this.props;
    const searchConfig = getSearchConfig(modelName);

    return (
      <Dropdown
        item
        upward={false}
        size="small"
        pointing="top left"
        simple
        className="link item mobile-filters-dropdown"
        disabled={_isEmpty(searchConfig.FILTERS)}
        text="Filters"
        closeOnBlur
        closeOnEscape
        scrolling
      >
        <Dropdown.Menu key="sub-menu">
          <Dropdown.Header>Refine search</Dropdown.Header>
          <Accordion styled fluid>
            {searchConfig.FILTERS.map((filter) => (
              <BucketAggregation
                key={filter.field}
                title={filter.title}
                agg={{ field: filter.field, aggName: filter.aggName }}
                overridableId="menu"
              />
            ))}
          </Accordion>
        </Dropdown.Menu>
      </Dropdown>
    );
  }

render() {
    const { containerCmp, title, agg } = this.props;
    const { activeIndex } = this.state;
    return containerCmp ? (
      <>
        <Accordion.Title
          active={activeIndex === agg.field}
          index={agg.field}
          onClick={this.handleClick}
          content={title}
        />
        <Accordion.Content active={activeIndex === agg.field}>
          {containerCmp}
        </Accordion.Content>
      </>
    ) : null;
  }

render() {
    const { data } = this.props;
    const panels = [
      {
        key: 'location-info',
        title: 'Location information',
        content: (
          <Accordion.Content>
            <div ref={this.locationInfoRef}>
              <LocationInformation location={data.metadata} />
            </div>
          </Accordion.Content>
        ),
      },
    ];

    return (
      <Accordion
        fluid
        styled
        className="highlighted"
        panels={panels}
        exclusive={false}
        defaultActiveIndex={[0]}
      />
    );
  }

render() {
    const { data } = this.props;
    const panels = [
      {
        key: 'provider-info',
        title: 'Provider information',
        content: (
          <Accordion.Content>
            <div ref={this.providerInfoRef}>
              <ProviderInformation provider={data.metadata} />
            </div>
          </Accordion.Content>
        ),
      },
    ];

    return (
      <Accordion
        fluid
        styled
        className="highlighted"
        panels={panels}
        exclusive={false}
        defaultActiveIndex={[0]}
      />
    );
  }

render() {
    const { isLoading, error, data, relations } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <SeriesHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <div id="metadata">
                          <SeriesMetadataTabs series={data} />
                        </div>
                        <Accordion
                          fluid
                          styled
                          className="highlighted"
                          panels={this.seriesPanels()}
                          exclusive={false}
                          defaultActiveIndex={[0, 1, 2]}
                        />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <SeriesActionMenu
                          anchors={this.anchors}
                          series={data}
                          relations={relations}
                        />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

StyledAccordian = styled(Accordion)`
  &&& {
    border-radius: 0;
    background: #1b1c1d;
  }
`

SubComponent = ({ row, index, clearSizeCache }) => {
  const [activeIndex, setActiveIndex] = useState(context[index]);
  const onClick = (e, { index: selected }) => {
    const result = activeIndex === selected ? null : selected;
    context[index] = result;
    setActiveIndex(result);
  };

  useLayoutEffect(() => {
    clearSizeCache(index, true);
  }, [activeIndex, index, clearSizeCache]);

  return (
    <Wrapper inverted>
      <StyledAccordian styled fluid inverted>
        <Accordion.Title active={activeIndex === 0} index={0} onClick={onClick}>
          <Icon name="dropdown" />
          What is the address for this user?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 0}>
          <p>{`${row.address}, ${row.city}, ${row.state} ${row.zipCode}`}</p>
        </Accordion.Content>
        <Accordion.Title active={activeIndex === 1} index={1} onClick={onClick}>
          <Icon name="dropdown" />
          What are the random sentences when you select this option?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 1}>
          <p>{row.sentence}</p>
        </Accordion.Content>
        <Accordion.Title active={activeIndex === 2} index={2} onClick={onClick}>
          <Icon name="dropdown" />
          What famous poem was included in Breaking Bad that referenced a king?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 2}>
          <p>
            The poem is called <b>Ozymandias</b> by <b>Percy Bryce Shelley</b>. You can find the
            poem below:
          </p>
          <div>I met a traveller from an antique land,</div>
          <div>Who said—“Two vast and trunkless legs of stone</div>
          <div>Stand in the desert. . . . Near them, on the sand,</div>
          <div>Half sunk a shattered visage lies, whose frown,</div>
          <div>And wrinkled lip, and sneer of cold command,</div>
          <div>Tell that its sculptor well those passions read</div>
          <div>Which yet survive, stamped on these lifeless things,</div>
          <div>The hand that mocked them, and the heart that fed;</div>
          <div>And on the pedestal, these words appear:</div>
          <div>My name is Ozymandias, King of Kings;</div>
          <div>Look on my Works, ye Mighty, and despair!</div>
          <div>Nothing beside remains. Round the decay</div>
          <div>Of that colossal Wreck, boundless and bare</div>
          <div>The lone and level sands stretch far away.”</div>
        </Accordion.Content>
      </StyledAccordian>
    </Wrapper>
  );
}

render() {
    const { metadata } = this.props;
    const { activeIndex } = this.state;
    const { extensions = {} } = metadata;
    return (
      <Accordion fluid styled>
        <Accordion.Title
          active={activeIndex === 'details'}
          index="details"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Details
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'details'}>
          <LiteratureRelations relations={metadata.relations} />
          <SeriesInfo metadata={metadata} />
          <SeriesAlternativeTitles
            alternativeTitles={metadata.alternative_titles}
          />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'identifiers'}
          index="identifiers"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Identifiers
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'identifiers'}>
          <Identifiers identifiers={metadata.identifiers} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'titles'}
          index="titles"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Titles
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'titles'}>
          <SeriesAllTitles
            title={metadata.title}
            alternativeTitles={metadata.alternative_titles}
          />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'notes'}
          index="notes"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Notes
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'notes'}>
          <LiteratureNotes content={metadata.note} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'links'}
          index="links"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Links
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'links'}>
          <SeriesLinks accessUrls={metadata.access_urls} urls={metadata.urls} />
        </Accordion.Content>

        {!_isEmpty(extensions) &&
          !_isEmpty(invenioConfig.SERIES.extensions.fields) && (
            <>
              <Accordion.Title
                active={activeIndex === invenioConfig.SERIES.extensions.label}
                index={invenioConfig.SERIES.extensions.label}
                onClick={this.handleClick}
              >
                <Icon name="dropdown" />
                {invenioConfig.SERIES.extensions.label}
              </Accordion.Title>
              <Accordion.Content
                active={activeIndex === invenioConfig.SERIES.extensions.label}
              >
                <Overridable
                  id="SeriesMetadataTabs.Extensions.mobile"
                  extensions={extensions}
                />
                <LiteratureMetadataExtensions
                  metadataExtensions={extensions}
                  configuredExtensions={invenioConfig.SERIES.extensions}
                />
              </Accordion.Content>
            </>
          )}
      </Accordion>
    );
  }

render() {
    const { anchors } = this.props;
    const panels = [
      {
        key: 'loan-requests',
        title: 'Loan requests',
        content: (
          <Accordion.Content>
            <div ref={anchors.loanRequestsRef} id="loan-requests">
              <DocumentPendingLoans />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-items',
        title: 'Physical items',
        content: (
          <Accordion.Content>
            <div ref={anchors.attachedItemsRef} id="document-items">
              <DocumentItems />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-eitems',
        title: 'E-items',
        content: (
          <Accordion.Content>
            <div ref={anchors.attachedEItemsRef} id="document-eitems">
              <DocumentEItems />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-series',
        title: 'Part of series',
        content: (
          <Accordion.Content>
            <div ref={anchors.seriesRef} id="document-series">
              <DocumentSeries />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-siblings',
        title: 'Relations',
        content: (
          <Accordion.Content>
            <div ref={anchors.relatedRef} id="document-siblings">
              <DocumentSiblings />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-purchase-orders',
        title: 'Purchase orders',
        content: (
          <Accordion.Content>
            <div ref={anchors.purchaseOrdersRef} id="document-purchase-orders">
              <DocumentPurchaseOrders />
            </div>
          </Accordion.Content>
        ),
      },
      {
        key: 'document-statistics',
        title: 'Statistics',
        content: (
          <Accordion.Content>
            <div ref={anchors.statisticsRef} id="document-statistics">
              <DocumentStats />
            </div>
          </Accordion.Content>
        ),
      },
    ];
    const defaultIndexes = [0, 1, 2, 3, 4, 5, 6];

    return (
      <Accordion
        fluid
        styled
        className="highlighted"
        panels={panels}
        exclusive={false}
        defaultActiveIndex={defaultIndexes}
      />
    );
  }

render() {
    const { activeIndex } = this.state;
    const { metadata } = this.props;
    const identifiers = _get(metadata, 'identifiers', []);
    const altIdentifiers = _get(metadata, 'alternative_identifiers', []);
    const { extensions = {} } = metadata;
    return (
      <Accordion fluid styled>
        <Accordion.Title
          active={activeIndex === 'details'}
          index="details"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Details
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'details'}>
          <LiteratureRelations relations={metadata.relations} />
          <DocumentInfo metadata={metadata} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'identifiers'}
          index="identifiers"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Identifiers
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'identifiers'}>
          <Overridable id="DocumentMetadataTabs.Identifiers">
            <Identifiers identifiers={identifiers.concat(altIdentifiers)} />
          </Overridable>
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'content'}
          index="content"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Content
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'content'}>
          <DocumentContent metadata={metadata} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'publications'}
          index="publications"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Publications
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'publications'}>
          <DocumentPublicationInfo publications={metadata.publication_info} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'conference'}
          index="conference"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Conference
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'conference'}>
          <DocumentConference conference={metadata.conference_info} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'notes'}
          index="notes"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Notes
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'notes'}>
          <LiteratureNotes content={metadata.note} />
        </Accordion.Content>

        <Accordion.Title
          active={activeIndex === 'resources'}
          index="resources"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Resources
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'resources'}>
          <DocumentEItemUrls dividers eitems={metadata.eitems} />
        </Accordion.Content>

        {!_isEmpty(extensions) &&
          !_isEmpty(invenioConfig.DOCUMENTS.extensions.fields) && (
            <>
              <Accordion.Title
                active={
                  activeIndex === invenioConfig.DOCUMENTS.extensions.label
                }
                index={invenioConfig.DOCUMENTS.extensions.label}
                onClick={this.handleClick}
              >
                <Icon name="dropdown" />
                {invenioConfig.DOCUMENTS.extensions.label}
              </Accordion.Title>
              <Accordion.Content
                active={
                  activeIndex === invenioConfig.DOCUMENTS.extensions.label
                }
              >
                <Overridable
                  id="DocumentMetadataTabs.Extensions.mobile"
                  extensions={extensions}
                />

                <LiteratureMetadataExtensions
                  metadataExtensions={extensions}
                  configuredExtensions={invenioConfig.DOCUMENTS.extensions}
                />
              </Accordion.Content>
            </>
          )}

        <Accordion.Title
          active={activeIndex === 'licenses'}
          index="licenses"
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          Licenses & copyrights
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 'licenses'}>
          <DocumentCopyrights metadata={metadata} />
        </Accordion.Content>
      </Accordion>
    );
  }

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>
    )
  }