Chemical Supplies Data Table

This project is a web-based interactive data table for managing chemical supplies. The table includes features like adding new rows, editing existing ones, sorting columns, moving rows up/down, deleting rows, and saving data. It also allows the user to refresh the table data. The table is initialized with sample data and allows operations on the fly.

Table of Contents

• Features
• Functions

Features

• Add Row: Add a new row with default values.
• Edit Row: Enable editing for selected rows.
• Move Rows: Change the position of selected rows (up or down).
• Delete Rows: Delete selected rows from the table.
• Sorting: Sort the data by clicking the column headers.
• Refresh Data: Reset the table to its original state.
• Save Data: Save the changes made to the table.

Functions

addRow()

Adds a new row with default values (--) for each field. The new row is marked as editable, allowing the user to input values.

saveData()

Saves the editable rows by updating the temporary data (tempData) with the user's input. Resets the selectedIds object to clear selected rows and sorts state. Updates the table with saved data.

editRow()

Makes the selected row(s) editable. Displays an alert if any previous unsaved changes exist before proceeding. Adds the isEditable property to the selected rows to enable content editing.

changeRowPosition(pos)

Moves the selected row up or down depending on the input pos (up or down). Ensures that only one row is selected when moving.

swapRow(swapIndex, currIndex)

Helper function to swap two rows in the tempData array and update the table accordingly.

deleteRows()

Deletes the selected row(s) from the table. Displays a confirmation prompt before deletion.

selectRow(event)

Toggles the selection state of a row. Manages row selection for editing, moving, or deleting operations.

changeOrder(event)

Sorts the data based on the column header clicked. Supports ascending and descending order toggling. Resets the previously sorted column to maintain clean UI.

customSort(data, key, order)

A custom sorting function that sorts the table data based on the key (column). Handles both numeric and string values and special cases like "N/A" for missing data.

getData(data, msg, showMsg)

Updates the HTML table based on the provided data. Optionally displays a message (msg) in an alert box if showMsg is true.

refreshData()

Resets the table to its initial state (reloading the original data). Clears any selected rows or sorting order applied.