Data-Table

Data table component for displaying leaderboard in https://www.dhruvaiiitk.tech (Technical Fest website)

Requirements (Prerequisites)

• Google Sheets
• Opensheet

Features

• Made use of the datatable api to create the dynamic table
• Styling via inbuilt bootstrap 5 plugin for datatable and basic css
• Converted google sheets data into JSON format via opensheet api

Usage

1. Create your table in google sheets, Sheet1 (if any other sheet please see [Deployment Notes]) (with the first row dedicated to specifying the column headings followed by actual data)

2. Make the sheet public (change it from restricted to anyone with the link and copy the link) eg : https://docs.google.com/spreadsheets/d/139xIKz3YSN7_ehr6Ha4DwpYynq86YlYm8BJDw8HCQlA/edit?usp=sharing , extract the portion after d/ and before /edit.. eg : 139xIKz3YSN7_ehr6Ha4DwpYynq86YlYm8BJDw8HCQlA

3. Place the extracted portion as a query parameter in the link ?val=<id> eg : https://ishaan5199.github.io/Data-Table/?val=139xIKz3YSN7_ehr6Ha4DwpYynq86YlYm8BJDw8HCQlA

4. If not provided as val parameter, dummy table will be displayed.

5. Google Sheet can have n number of columns and rows, for specific splitting and displaying of data in any column, alter after line 19's comment

Deployment Notes

1. Returned JSON data from the opensheet api : https://opensheet.elk.sh/139xIKz3YSN7_ehr6Ha4DwpYynq86YlYm8BJDw8HCQlA/Sheet1

2. If working on any other sheet replace /Sheet1 with your specific sheet on line 3 of init.js file

3. Live Server

Tech Stack / Built With

1. HTML, CSS, JS

Authors

Ishaan Mahesh

You can find me here at: LinkedIn