Skip to content

Commit b32ac95

Browse files
jackparmerjackparmer
authored
Merge pull request #1788 from akksi/fix/dash-table-header-cols
2 parents 464a743 + 403e34b commit b32ac95

File tree

3 files changed

+153
-136
lines changed

3 files changed

+153
-136
lines changed

‎components/dash-table/src/dash-table/components/Table/Table.less

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -687,9 +687,20 @@
687687
}
688688

689689
.dash-spreadsheet-inner {
690+
.dash-header>div {
691+
display: flex;
692+
}
693+
.column-actions {
694+
display: flex;
695+
flex-wrap: wrap;
696+
}
697+
698+
.column-header-name {
699+
margin-left: auto;
700+
}
701+
690702
[class^='column-header--'], [class^='dash-filter--'] {
691703
cursor: pointer;
692-
float: left;
693704
}
694705

695706
.column-header--select {

‎components/dash-table/src/dash-table/derived/header/content.tsx

Lines changed: 140 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -284,150 +284,156 @@ function getter(
284284

285285
return (
286286
<div key={columnIndex}>
287-
{!column_selectable || !selectable ? null : (
288-
<span className='column-header--select'>
289-
<input
290-
checked={allSelected}
291-
onChange={selectColumn(
292-
selected_columns,
287+
<div className='column-actions'>
288+
{!column_selectable || !selectable ? null : (
289+
<span className='column-header--select'>
290+
<input
291+
checked={allSelected}
292+
onChange={selectColumn(
293+
selected_columns,
294+
column,
295+
columns,
296+
headerRowIndex,
297+
setProps,
298+
mergeDuplicateHeaders,
299+
column_selectable === 'single',
300+
!allSelected
301+
)}
302+
name={`column-select-${id}`}
303+
type={
304+
column_selectable === 'single'
305+
? 'radio'
306+
: 'checkbox'
307+
}
308+
/>
309+
</span>
310+
)}
311+
{sort_action === TableAction.None ||
312+
!isLastRow ? null : (
313+
<span
314+
className='column-header--sort'
315+
onClick={doSort(
316+
column.id,
317+
sortBy,
318+
mode,
319+
setProps
320+
)}
321+
>
322+
<FontAwesomeIcon
323+
icon={getSortingIcon(
324+
column.id,
325+
sortBy
326+
)}
327+
/>
328+
</span>
329+
)}
330+
331+
{!renamable ? null : (
332+
<span
333+
className='column-header--edit'
334+
onClick={editColumnName(
293335
column,
294336
columns,
295337
headerRowIndex,
296338
setProps,
297-
mergeDuplicateHeaders,
298-
column_selectable === 'single',
299-
!allSelected
339+
mergeDuplicateHeaders
300340
)}
301-
name={`column-select-${id}`}
302-
type={
303-
column_selectable === 'single'
304-
? 'radio'
305-
: 'checkbox'
306-
}
307-
/>
308-
</span>
309-
)}
310-
{sort_action === TableAction.None ||
311-
!isLastRow ? null : (
312-
<span
313-
className='column-header--sort'
314-
onClick={doSort(
315-
column.id,
316-
sortBy,
317-
mode,
318-
setProps
319-
)}
320-
>
321-
<FontAwesomeIcon
322-
icon={getSortingIcon(column.id, sortBy)}
323-
/>
324-
</span>
325-
)}
341+
>
342+
<FontAwesomeIcon icon='pencil-alt' />
343+
</span>
344+
)}
326345

327-
{!renamable ? null : (
328-
<span
329-
className='column-header--edit'
330-
onClick={editColumnName(
331-
column,
332-
columns,
333-
headerRowIndex,
334-
setProps,
335-
mergeDuplicateHeaders
336-
)}
337-
>
338-
<FontAwesomeIcon icon='pencil-alt' />
339-
</span>
340-
)}
341-
342-
{!clearable ? null : (
343-
<span
344-
className='column-header--clear'
345-
onClick={doAction(
346-
actions.clearColumn,
347-
selected_columns,
348-
column,
349-
columns,
350-
filterOperator,
351-
visibleColumns,
352-
headerRowIndex,
353-
mergeDuplicateHeaders,
354-
setFilter,
355-
setProps,
356-
map,
357-
data
358-
)}
359-
>
360-
<FontAwesomeIcon icon='eraser' />
361-
</span>
362-
)}
363-
364-
{!deletable ? null : (
365-
<span
366-
className={
367-
'column-header--delete' +
368-
(spansAllColumns ? ' disabled' : '')
369-
}
370-
onClick={
371-
spansAllColumns
372-
? undefined
373-
: doAction(
374-
actions.deleteColumn,
375-
selected_columns,
376-
column,
377-
columns,
378-
filterOperator,
379-
visibleColumns,
380-
headerRowIndex,
381-
mergeDuplicateHeaders,
382-
setFilter,
383-
setProps,
384-
map,
385-
data
386-
)
387-
}
388-
>
389-
<FontAwesomeIcon
390-
icon={['far', 'trash-alt']}
391-
/>
392-
</span>
393-
)}
346+
{!clearable ? null : (
347+
<span
348+
className='column-header--clear'
349+
onClick={doAction(
350+
actions.clearColumn,
351+
selected_columns,
352+
column,
353+
columns,
354+
filterOperator,
355+
visibleColumns,
356+
headerRowIndex,
357+
mergeDuplicateHeaders,
358+
setFilter,
359+
setProps,
360+
map,
361+
data
362+
)}
363+
>
364+
<FontAwesomeIcon icon='eraser' />
365+
</span>
366+
)}
394367

395-
{!hideable ? null : (
396-
<span
397-
className={
398-
'column-header--hide' +
399-
(spansAllColumns ? ' disabled' : '')
400-
}
401-
onClick={
402-
spansAllColumns
403-
? undefined
404-
: () => {
405-
const ids =
406-
actions.getColumnIds(
407-
column,
408-
visibleColumns,
409-
headerRowIndex,
410-
mergeDuplicateHeaders
411-
);
368+
{!deletable ? null : (
369+
<span
370+
className={
371+
'column-header--delete' +
372+
(spansAllColumns ? ' disabled' : '')
373+
}
374+
onClick={
375+
spansAllColumns
376+
? undefined
377+
: doAction(
378+
actions.deleteColumn,
379+
selected_columns,
380+
column,
381+
columns,
382+
filterOperator,
383+
visibleColumns,
384+
headerRowIndex,
385+
mergeDuplicateHeaders,
386+
setFilter,
387+
setProps,
388+
map,
389+
data
390+
)
391+
}
392+
>
393+
<FontAwesomeIcon
394+
icon={['far', 'trash-alt']}
395+
/>
396+
</span>
397+
)}
412398

413-
const hidden_columns =
414-
hiddenColumns
415-
? R.union(
416-
hiddenColumns,
417-
ids
418-
)
419-
: ids;
399+
{!hideable ? null : (
400+
<span
401+
className={
402+
'column-header--hide' +
403+
(spansAllColumns ? ' disabled' : '')
404+
}
405+
onClick={
406+
spansAllColumns
407+
? undefined
408+
: () => {
409+
const ids =
410+
actions.getColumnIds(
411+
column,
412+
visibleColumns,
413+
headerRowIndex,
414+
mergeDuplicateHeaders
415+
);
420416

421-
setProps({hidden_columns});
422-
}
423-
}
424-
>
425-
<FontAwesomeIcon
426-
icon={['far', 'eye-slash']}
427-
/>
428-
</span>
429-
)}
417+
const hidden_columns =
418+
hiddenColumns
419+
? R.union(
420+
hiddenColumns,
421+
ids
422+
)
423+
: ids;
430424

425+
setProps({
426+
hidden_columns
427+
});
428+
}
429+
}
430+
>
431+
<FontAwesomeIcon
432+
icon={['far', 'eye-slash']}
433+
/>
434+
</span>
435+
)}
436+
</div>
431437
<span className='column-header-name'>
432438
{labels[columnIndex]}
433439
</span>

‎components/dash-table/tests/selenium/test_scrolling2.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ def test_scrv004_virtualization_can_edit(test, props):
134134
test.send_keys("abc" + Keys.ENTER)
135135
wait.until(lambda: target.cell(1, 1).get_text() == "abc", 3)
136136

137-
scroll_table_by(test, 2000)
137+
scroll_table_by(test, 2500)
138138
target.cell(80, 1).click()
139139

140140
test.send_keys("def" + Keys.ENTER)

0 commit comments

Comments
 (0)