New plugin : align columns !

[lolcabanon]

Added a plugin to manage columns alignment.

I think I found a neat API and behavior, but it's not final as-is. I'm open to suggestions, and would also need to create the docs accordingly.

How it works

Simply apply text-align: ${alignment} to cells.

Table Options

Default Alignment

Set default alignment for table. Columns without alignment property will use the default if not disabled.

Toggle Order

Set alignment order.

A final column toggle order will be [ columnOptions.alignment, ...toggleOrder ];

Column Options

Alignment

Initial column alignment.

Align Head

Does the th align? If not, only td cells align.

Disable

Disable alignment completely for the moment.

I'd like this option to disable toggling only, while allowing to set an initial value.

Usage

<script>
let defaultAlignment: ColumnAlignment | undefined;

const table = createTable(data, {
  align: addAlignedColumns({
	  defaultAlignment,
	  toggleOrder: ['auto', 'right']
  }),
  // ...
});

const columns = table.createColumns([
  table.column({
    header: 'Data',
    accessor: 'data',
    plugins: {
    align: {
      alignment: 'right',
      // alignHead: false,
      // disable: false
    }
  }
]);
</script>

<!-- table -->

<!-- thead tr -->
  <th {...attrs}>
    {#if !props.align.disabled && props.align.alignment !== undefined}
      <button use:props.align.toggle>
        {props.align.alignment}
      </button>
      <button use:props.align.clear>x</button>
    {/if}
  </th>

<!-- tbody tr-->
  <td {...attrs}>
    <!-- td content -->
  </th>

[coveralls]

Pull Request Test Coverage Report for Build 7996968572

Details

• -212 of 212 (0.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-2.4%) to 57.349%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/lib/plugins/index.ts	0	1	0.0%
src/lib/plugins/addAlignedColumns.ts	0	211	0.0%

Totals
Change from base Build 7758063433:	-2.4%
Covered Lines:	2616
Relevant Lines:	4782

---

💛 - Coveralls

[bryanmylee]

This is really cool! I'm already struggling to maintain the existing plugins as is right now, so I'm a bit weary to add it to the core set of plugins, but I would love to add a section in the documentation pointing to the plugin examples!

[lolcabanon]

Totally understandable! I will polish it and release as a standalone package.

If you have any feedback or ideas feel free!

:) ✌️

[hgoona]

Hi @lolcabanon! I'm getting my head around plugins and came across your post - Table Columns not aligning is driving me crazy. Was wondering if your plugin is available to try and use?
Is there an example or installation docs for it? Would greatly appreciate any help to try it out🙏🏾

[lolcabanon]

Hi @lolcabanon! I'm getting my head around plugins and came across your post - Table Columns not aligning is driving me crazy. Was wondering if your plugin is available to try and use?
Is there an example or installation docs for it?

Hey @hgoona!

https://github.com/lolcabanon/add-aligned-columns

It's pinned on my profile. :)

It is really experimental for now, but I am using it in a project of mine. Don't hesitate to provide feedback as I don't really know how i'd like the final API design!

Currently the alignment toggling does not work reactively for td cells, only for th... It used to work in v0.0.2 iirc. Initial alignment works.

For the docs, I have not written it yet but will do. Look at the code and type.d.ts for the moment ;)

[hgoona]

Hi @lolcabanon! I'm getting my head around plugins and came across your post - Table Columns not aligning is driving me crazy. Was wondering if your plugin is available to try and use?
Is there an example or installation docs for it?

Hey @hgoona!

https://github.com/lolcabanon/add-aligned-columns

It's pinned on my profile. :)

It is really experimental for now, but I am using it in a project of mine. Don't hesitate to provide feedback as I don't really know how i'd like the final API design!

Currently the alignment toggling does not work reactively for td cells, only for th... It used to work in v0.0.2 iirc. Initial alignment works.

For the docs, I have not written it yet but will do. Look at the code and type.d.ts for the moment ;)

Oh I see! Thanks! ..I can pnpm install this plugin?
By chance do you have an example / repl of it working minimally to test/follow?

[lolcabanon]

Oh I see! Thanks! ..I can pnpm install this plugin?\nBy chance do you have an example / repl of it working minimally to test/follow?

Yes you can pnpm install!

---

Since it's in an early stage, the best way to see it in action is to clone the repo and run it.

git clone https://github.com/lolcabanon/add-aligned-columns

pnpm i

pnpm dev

Then go to localhost:5174 for the complete example or localhost:5174/simpletable for a simplified one (align columns only).

Look in src/routes/simpletable/+page.svelte for the code if you want to play with it.

[hgoona]

Oh I see! Thanks! ..I can pnpm install this plugin?\nBy chance do you have an example / repl of it working minimally to test/follow?

Yes you can pnpm install!

Since it's in an early stage, the best way to see it in action is to clone the repo and run it.

git clone https://github.com/lolcabanon/add-aligned-columns

pnpm i

pnpm dev

Then go to localhost:5174 for the complete example or localhost:5174/simpletable for a simplified one (align columns only).

Look in src/routes/simpletable/+page.svelte for the code if you want to play with it.

@lolcabanon I just had a look and I think I got it working! Is it only for changing the alignment of text inside the row?

What does 'alignOn' do?

I've got rows and sub rows/expanded rows with different schemas, and I'm finding that even though the sub rows header labels are the same length, the columns are all sorts of varying widths. It's driving me wild haha does your plugin solve this? Or is there another way to solve this?

See snippy below: (why don't these columns align...)

[lolcabanon]

does your plugin solve this? Or is there another way to solve this?

Maybe you need to set explicitely minWidth and/or maxWidth on the core resize plugin?

As for my plugin, it aligns the text inside columns like so :

Align Left	Align Center	Align Right
Hey	it's	aligned!

What does 'alignOn' do?

I think I removed it in v0.0.3.

This post was made even before v0.0.1 so its definitely outdated. Look at src/lib/addAlignedColumns.ts for current options.

[hgoona]

Ah I see. Ok I have your plugin working @lolcabanon 👍🏾 but it turns out i don't need it 😅 and it seems the resize plugin is not working! On the initial load of my page I can see the resize props rendering in a

 block, but then when rendering completes all the initialWidths/max/minWidths set from the resize plugin become changed to different values..

@bryanmylee do you know why this might be happening? I've got my s-h-table inside a svelte component and the data being loaded into the component>then>createTable is originating from a server side load function where the component is setup like this:

const tableStore = writable(tData);

$: {
$tableStore = tData; // if the data changes, refresh the store
}

let table = createTable(tableStore, {```

[lolcabanon]

I can use the resize plugin without problems.

[hgoona]

I can use the resize plugin without problems.

from the render of pre with <pre>$columnWidths = {JSON.stringify($columnWidths, null, 2)}</pre> when the page is loading i see the augmented resize plugin widths flash on screen, but then it changes to random widths in the pre block... i think this happens after the page or my data fully loads.... Any idea what might be happening?

[hgoona]

I can use the resize plugin without problems.

hey @lolcabanon are you on Svelte 4? I'm still having issue with the resize plugin, using svelte 4.2.12

Is it possible to take a glance at my REPL to see what I've done wrong? >>>https://svelte.dev/repl/aebed9b9f2ad441e90a1163ab4f5cd6d?version=3.48.0

@bryanmylee would greatly appreciate your insight on this?