Table

Import the component in the script section of your Svelte file:

import Table from 'svve11/Table.svelte'
            

Creating a Table

To supply the table with its contents, an options object is passed as a prop to the table. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 6 properties.

Required Props

• ariaLabel (string): sets the aria-label attribute of the table
• ariaDescription (string): sets the title of the table. It will also set the table's aria-description attribute.
• columnNames (array of strings): each string in the array corresponds to a column name of the table.
• rowsContent (array of arrays of strings): each inner array corresponds to a row of the table. Each string in the inner array corresponds to a cell in the row. The number of strings in each of these arrays should match the number of strings in the columnNames array.

Optional Props

• id (string): sets the id attribtue of the table.
• styles (object): sets the styles for the various table components. Each key in the object is defined as follows:
• overallStyles (string): sets the style attribute of the overall table element.
• titleStyles (string): sets the style attribute of the table's title
• headersRowStyles (string): sets the style attribute of the first row of the table which contains the column names.
• generalRowStyles (string): sets the attribute of all the table's rows.
• oddRowStyles (string): sets the style attributes of all the table's odd rows.
• evenRowStyles (string): sets the style attribute of all the table's even rows.

Example Options Object:

const tableOptions = {
  id: 'demo-table',
  ariaLabel: 'demo',
  ariaDescription: 'svve11 team information',
  columnNames: ['Name', 'Age', 'Favorite Color'],
  rowsContent: [
	['Nurbek', '19', 'White'],
	['Paul', '26', 'Red'],
	['Tim', '29', 'Blue'],
	['Simon', '26', 'Green']
  ],
  styles: {
	overallStyles: 'background-color: powderblue',
	titleStyles: 'text-align: left;',
	headersRowStyles: 'background-color: grey, color: white',
	generalRowStyles: 'font-weight: lighter',
	oddRowStyles: 'background-color: white',
	evenRowStyles: 'background-color: lightgrey'
  }
};
             		

Instantiating a table

<Table options={tableOptions}
					

Example Table: