naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

resizable data table columns

Open wc-matteo opened this issue 3 years ago • 6 comments

This function solves the problem (这个功能解决的问题)

allowing the user to select at runtime the best column size for their needs

Expected API (期望的 API)

probably a boolean prop to allow the column resize

wc-matteo avatar Nov 11 '21 12:11 wc-matteo

We will consider it.

07akioni avatar Nov 11 '21 17:11 07akioni

We will consider it.

@07akioni 老哥,就你一个人在维护组件库啊,有点难顶哦

fcloud89 avatar Nov 12 '21 01:11 fcloud89

Implemented resizable columns is this gist. It turned out to be not so hard.

Some preparations must be done to use it:

  1. global style override th.n-data-table-th { padding: 0 !important; }
  2. Each resizable column defenition in array must be liko so: { key: 'rate', title: createResizableColumnTitle('Rate'), width: 150 } It has to have width!
  3. Columns must be reactive e.g const columns = reactive(createColumns());
  4. usage of scroll-x prop is not recommended as all columns width defined

Bulkman avatar Feb 11 '22 13:02 Bulkman

@Bulkman hi, will you share a demo for it?

litt1e-p avatar Aug 02 '22 01:08 litt1e-p

你这方案不行啊,拖动了表格线还是不动

houqiangxie avatar Aug 02 '22 04:08 houqiangxie

Hello! Thanks for the amazing library. Any plans/updates on column resize feature? Thank you.

funkindy avatar Aug 02 '22 13:08 funkindy

track in #3165

equt avatar Aug 17 '22 08:08 equt