https://github.com/acryps/page-data-table

Data Table
https://github.com/acryps/page-data-table

Last synced: 5 days ago
JSON representation

Data Table

• Host: GitHub
• URL: https://github.com/acryps/page-data-table
• Owner: acryps
• Created: 2023-10-23T10:35:12.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-10T12:02:21.000Z (7 months ago)
• Last Synced: 2024-04-10T14:49:31.901Z (7 months ago)
• Language: TypeScript
• Size: 70.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# page data table

Create complex data entry tables with ease

- Supports shortcuts to switch between cells, fields and rows

- Smart paste from spreadsheet applications like Excel or Google Docs

- Simple, yet expandable API

## usage

Extend the `DataTable` class and use your component in a page component.

You can extend all of the functions of the DataTable or just use the default implementation.

The functions are documented in code.

We do not provide default styles, except for styles required for the table to render as a table. Include them from `source/index.scss`.

```

export class BookPricesComponent extends Component {

	books: Book[];

	editions: Edition[];

	async onload() {

		this.books = // get your books

		this.editions = // get your variants, like hardcover, e-book and pocket book

	}

	render() {

		return 

			Book Prices

			{new BookPriceTable(books, editions)}

		;

	}

}

class BookPriceTable extends DataTable {

	renderColumnHeader(edition: Edition) {

		return edition.name;

	}

	renderRowHeaders(book: Book) {

		return [

			book.name,

			new AuthorComponent(book.author)

		];

	}

	renderCell(edition: Edition, book: Book) {

		let bookEdition = option.standards.find(standard => standard.standardsAgencyId == agency.id) ?? new StandardizedOptionViewModel();

		const nameField =  save()}

			ui-target='price'

		/>;

		

		const productCodeField =  save()}

			ui-target='isbn'

		/>

		const save = async () => {

			// save the changes

		};

		return [nameField, productCodeField];

	}

}

```