60 | Creating a Table
61 |
62 |
63 | To supply the table with its contents, an options object is passed as a prop to the
64 | table. This object can be created in the script section of the .svelte file or imported
65 | in from another location. The options object has 6 properties.
66 |
67 |
68 | Required Props
69 | - ariaLabel (string): sets the aria-label attribute of the table
70 | -
71 | ariaDescription (string): sets the title of the table. It will also set the table's
72 | aria-description attribute.
73 |
74 | -
75 | columnNames (array of strings): each string in the array corresponds to a column name
76 | of the table.
77 |
78 | -
79 | rowsContent (array of arrays of strings): each inner array corresponds to a row of the
80 | table. Each string in the inner array corresponds to a cell in the row. The number of
81 | strings in each of these arrays should match the number of strings in the columnNames
82 | array.
83 |
84 | Optional Props
85 | - id (string): sets the id attribtue of the table.
86 | -
87 | styles (object): sets the styles for the various table components. Each key in the
88 | object is defined as follows:
89 |
90 |
91 | -
92 | overallStyles (string): sets the style attribute of the overall table element.
93 |
94 | - titleStyles (string): sets the style attribute of the table's title
95 | -
96 | headersRowStyles (string): sets the style attribute of the first row of the table
97 | which contains the column names.
98 |
99 | - generalRowStyles (string): sets the attribute of all the table's rows.
100 | - oddRowStyles (string): sets the style attributes of all the table's odd rows.
101 | -
102 | evenRowStyles (string): sets the style attribute of all the table's even rows.
103 |
104 |
105 |
106 | Example Options Object:
107 |
108 | {`const tableOptions = {
109 | id: 'demo-table',
110 | ariaLabel: 'demo',
111 | ariaDescription: 'svve11 team information',
112 | columnNames: ['Name', 'Age', 'Favorite Color'],
113 | rowsContent: [
114 | ['Nurbek', '19', 'White'],
115 | ['Paul', '26', 'Red'],
116 | ['Tim', '29', 'Blue'],
117 | ['Simon', '26', 'Green']
118 | ],
119 | styles: {
120 | overallStyles: 'background-color: powderblue',
121 | titleStyles: 'text-align: left;',
122 | headersRowStyles: 'background-color: grey, color: white',
123 | generalRowStyles: 'font-weight: lighter',
124 | oddRowStyles: 'background-color: white',
125 | evenRowStyles: 'background-color: lightgrey'
126 | }
127 | };`}
128 |
129 |
130 | Instantiating a table
131 |
132 | {`
134 |
135 | Example Table:
136 |
160 |
161 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
193 |
194 |
195 |
196 |
197 |
199 |
--------------------------------------------------------------------------------
/src/routes/pages/tableStyles.js:
--------------------------------------------------------------------------------
1 | // dark black/white theme
2 | // export default {
3 | // overallStyles: 'background-color: white;',
4 | // titleStyles: 'font-size: 16px; text-align: left;',
5 | // headersRowStyles: 'width: 25%; font-weight:500; background: rgb(77, 77, 77); ',
6 | // generalRowStyles: 'width: 25%; background: black; padding: 2px 5px;'
7 | // };
8 |
9 | // Purple theme
10 | export default {
11 | overallStyles: 'background-color: #7000CC;',
12 | titleStyles: 'font-size: 16px; text-align: left; background: white;',
13 | headersRowStyles: 'width: 25%; background: #7000cce8; color: white',
14 | generalRowStyles: 'width: 25%; background: white; padding: 2px 5px;'
15 | };
16 |
--------------------------------------------------------------------------------
/src/routes/pages/textinput.svelte:
--------------------------------------------------------------------------------
1 |
52 |
53 |
54 |
55 | {componentName}
56 |
62 |
67 |
68 |
69 |
70 |
71 |
81 |
82 |
83 |
84 |
178 |
179 |
180 |
181 |
188 |
189 |
190 |
191 |
192 |
205 |
--------------------------------------------------------------------------------
/src/stylesheets/variables.scss:
--------------------------------------------------------------------------------
1 | // colors
2 | $black: rgb(17, 17, 17);
3 | $black-transparent:rgba(17, 17, 17, 0.95);
4 | $darkgrey: rgb(77, 77, 77);
5 | $lightgrey: rgb(233, 233, 233);
6 | $blue: rgb(24, 171, 254);
7 | $blue-transparent: rgb(25, 139, 254, .9);
8 | $red: #eb1646;
9 | $white: #fff;
10 |
11 | $color-background: #fff;
12 | $color-primary: #7000CC;
13 | $color-primary-transparent: #7000cce8;
14 | $color-text-darkest: rgb(17, 17, 17);
15 | $color-text-dark: rgb(40, 40, 40)
16 |
17 | // other
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Svve11/687d121a4b6d1798fb151e30fa6da40fde86a30a/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import preprocess from 'svelte-preprocess';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://github.com/sveltejs/svelte-preprocess
7 | // for more information about preprocessors
8 | preprocess: preprocess(),
9 |
10 | kit: {
11 | adapter: adapter(),
12 | prerender: {
13 | default: true
14 | }
15 | }
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------