Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New plugin : align columns ! #191

Closed

Conversation

lolcabanon
Copy link
Contributor

@lolcabanon lolcabanon commented Feb 16, 2024

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
Copy link

coveralls commented Feb 16, 2024

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 Coverage Status
Change from base Build 7758063433: -2.4%
Covered Lines: 2616
Relevant Lines: 4782

💛 - Coveralls

@bryanmylee
Copy link
Owner

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
Copy link
Contributor Author

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

If you have any feedback or ideas feel free!

:) ✌️

@lolcabanon lolcabanon closed this Feb 22, 2024
@hgoona
Copy link

hgoona commented Mar 5, 2024

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
Copy link
Contributor Author

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
Copy link

hgoona commented Mar 5, 2024

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
Copy link
Contributor Author

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
Copy link

hgoona commented Mar 6, 2024

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...)
image
image

@lolcabanon
Copy link
Contributor Author

lolcabanon commented Mar 6, 2024

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
Copy link

hgoona commented Mar 7, 2024

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
Copy link
Contributor Author

I can use the resize plugin without problems.

@hgoona
Copy link

hgoona commented Mar 7, 2024

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
Copy link

hgoona commented Mar 10, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants