Cole's Solid Library

Welcome to Cole's Solid Library. I wasn't totally happy with existing solutions so I decided to roll my own solution. It isn't ready for use yet it needs alot of work, mainly styling, but not totally.

Requirements

You will need the following packages. I included the npm commands.

• SolidJS

npx degit solidjs/templates/ts <name>

• Sass

npm i sass

Installation

To install the library, use npm:

npm install coles-solid-library

Import and add use the following line in App.tsx from the library. It defaults to 'dark' but also has a default value of 'light'. Should be used inside a createEffect if you want reactive updating.

  addTheme()

At the top of index.scss place the following line. It adds the dark theme and lightTheme and the addTheme() requires it. It will default to light without it.

  @use 'coles-solid-library/themes/themes.scss';

Usage

Here's a basic example of how to use the library:

import { createSignal, type Component } from 'solid-js';
import { addTheme, Body, Cell, Column, Header, Row, Table } from 'coles-solid-library';
import styles from './App.module.scss';

interface Person {
  name: string;
  age: number;
}
const App: Component = () => {
  const [data, setData] = createSignal([{ name: 'John', age: 23 }, { name: 'Jane', age: 24 }]);
  addTheme();
  return (
    <div >
      <Container theme='surface'>
        <Table style={{"border": "1px solid white"}}  data={data()}  columns={['name', 'age']}>
          <Column name='name' >
            <Header>Name</Header>
            <Cell<Person>>{(row) => row.name}</Cell>
            <Cell footer>The Names</Cell>
            <Cell<Person>  rowNumber={2} colSpan={2}>{(row) => `${row.name} is ${row.age}`}</Cell>
          </Column>

          <Column name='age'>
            <Header>Age</Header>
            <Cell<Person>>{(row) => row.age}</Cell>
            <Cell footer>The Ages</Cell>
          </Column>

          <Row header style={{"border-bottom": "1px solid white"}} />
          <Row class={styles.textCenter} />
          <Row class={styles.textCenter} style={{"border-bottom": "1px solid white"}} rowNumber={2} />
          <Row footer />
        </Table>
      </Container>
    </div>
  );
};

export default App;

Credits

This project wouldn’t be possible without the incredible support from these resources:

• SolidJS: A fast and reactive JavaScript library for building user interfaces.
• Sass: A powerful CSS extension language that streamlines styling.
• Material Icons/Symbols: A comprehensive set of symbols by Google’s Material Design.

License

This project is licensed under the MIT License.