Salesforce Stack Exchange Explorer

stackoverflowExplorer.css

.divcenter {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}

stackoverflowExplorer.html

<template>
    <div class="divcenter">Salesforce Stackexchange User Explorer</div>
    <lightning-layout multiple-rows>
                <lightning-layout-item size="2" padding="around-small">
                        <lightning-combobox name="progress" label="Stack Exchange Group"
                        value="" placeholder="Select Group" options={options} onchange={handleChange}
                        required></lightning-combobox>
                </lightning-layout-item>
                <lightning-layout-item size="2" padding="around-small">
                        <lightning-combobox
                        name="progress"
                        label="Order By"
                        value=""
                        placeholder="Select Field"
                        options={fields}
                        onchange={handleFieldChange}
                        required
                ></lightning-combobox>
                </lightning-layout-item>

                <lightning-layout-item size="4" padding="around-small">
                        <div class="slds-m-around--medium">
                        <lightning-button
                        variant="base" label="Get Users" title="Get Users" onclick={handleClick}>
                        </lightning-button>
                        </div>
                </lightning-layout-item>
    </lightning-layout>


  <div style="height: 400px;">
        <lightning-datatable
                key-field="id"
                data={data}
                show-row-number-column=false
                hide-checkbox-column
                columns={columns}>
        </lightning-datatable>
    </div>
    <div class="slds-m-around_medium">
            <c-paginator onprevious={previousHandler} onnext={nextHandler}></c-paginator>
    </div>
</template>

stackoverflowExplorer.js

import { LightningElement,track,api } from 'lwc';
import getUsers from '@salesforce/apex/StackExchangeAccess.getUsers';

const columns = [
    { label: 'Member Name', fieldName: 'display_name' },
    { label: 'Website', fieldName: 'website_url' },
    { label: 'Reputation', fieldName: 'reputation' },
    { label: 'Gold Badge', fieldName: 'gold', cellAttributes: { class: 'gold'} },
    { label: 'Silver Badge', fieldName: 'silver' },
    { label: 'Bronze Badge', fieldName: 'bronze' },
    { label: 'Is Employee', fieldName: 'is_employee' },
    { label: 'Created Date', fieldName: 'date', type: "date",
    typeAttributes:{
        year: "numeric",
        month: "2-digit",
        day: "2-digit"
    }},
];

export default class StackoverflowExplorer extends LightningElement {
    @track data = [];
    @track columns = columns;
    @track rowOffset = 0;
    @track message='';

    @track page = 1;
    @api stage;
    @api pageSize;
    @api sortdirection;
    @api sortName='reputation';
    @api sitename='salesforce';

    @track value = 'salesforce';

    get options() {
        return [
            { label: 'Salesforce', value: 'salesforce' },
            { label: 'Stackoverflow', value: 'stackoverflow' },
            { label: 'Freelancing', value: 'freelancing' },
        ];
    }
    get fields() {
        return [
            { label: 'Reputaion', value: 'reputation' },
            { label: 'Name', value: 'name' }
        ];
    }
    handleChange(event) {
        this.sitename = event.detail.value;
    }
    handleFieldChange(event) {
        this.sortName = event.detail.value;
    }

    handleClick() {
        getUsers({
            pageNumber:this.page,
            pageSize:10,
            sortdirection:'desc', 
            sortName:this.sortName, 
            sitename:this.sitename
        })
        .then(result => {
            for (let i = 0; i < result.items.length; i++) {
                let row = result.items[i];
                row.silver = row.badge_counts.silver;
                row.gold = row.badge_counts.gold;
                row.bronze = row.badge_counts.bronze;
                row.date = new Date(parseInt(row.creation_date.substr(6)));
            }
            this.data = result.items;
            this.error = undefined;
            console.log(result.items);
        })
        .catch(error => {
            console.log('error:' + JSON.stringify(error));
            this.error = error;
            this.data = undefined;
        });
    }
    previousHandler()
    {
        this.page=this.page-1;
        this.handleClick();
    }
    nextHandler()
    {
        this.page=this.page+1;
        this.handleClick();
    }
}

stackoverflowExplorer.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="stackoverflowExplorer">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>