mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-05 22:38:48 +00:00
Merge branch 'main' of github.com:ToolJet/ToolJet into develop
This commit is contained in:
navaneeth
commit
668f4b8478
1 changed files with 111 additions and 108 deletions
|
|
@ -360,7 +360,7 @@ export function Table({
|
|||
<div>
|
||||
<input
|
||||
type="text"
|
||||
style={cellStyles}
|
||||
style={{ ...cellStyles, maxWidth: width, minWidth: width - 10 }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (e.target.defaultValue !== e.target.value) {
|
||||
|
|
@ -400,7 +400,9 @@ export function Table({
|
|||
readOnly={!column.isEditable}
|
||||
style={{ maxWidth: width, minWidth: width - 10 }}
|
||||
onBlur={(e) => {
|
||||
handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original);
|
||||
if (column.isEditable) {
|
||||
handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original);
|
||||
}
|
||||
}}
|
||||
defaultValue={cellValue}
|
||||
></textarea>
|
||||
|
|
@ -561,65 +563,65 @@ export function Table({
|
|||
const leftActionsCellData =
|
||||
leftActions().length > 0
|
||||
? [
|
||||
{
|
||||
id: 'leftActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.leftActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return leftActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
{
|
||||
id: 'leftActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.leftActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return leftActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
]
|
||||
: [];
|
||||
|
||||
const rightActionsCellData =
|
||||
rightActions().length > 0
|
||||
? [
|
||||
{
|
||||
id: 'rightActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.rightActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return rightActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
{
|
||||
id: 'rightActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.rightActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return rightActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
]
|
||||
: [];
|
||||
|
||||
const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
|
||||
|
|
@ -745,7 +747,7 @@ export function Table({
|
|||
if (!serverSidePagination && clientSidePagination) {
|
||||
setPageSize(10);
|
||||
}
|
||||
}, [clientSidePagination, serverSidePagination]);
|
||||
}, [clientSidePagination, serverSidePagination, rows]);
|
||||
|
||||
useEffect(() => {
|
||||
const pageData = page.map((row) => row.original);
|
||||
|
|
@ -835,8 +837,9 @@ export function Table({
|
|||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`table-row ${highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
|
||||
}`}
|
||||
className={`table-row ${
|
||||
highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
|
||||
}`}
|
||||
{...row.getRowProps()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -898,62 +901,62 @@ export function Table({
|
|||
Object.keys(componentState.changeSet || {}).length > 0 ||
|
||||
showFilterButton ||
|
||||
showDownloadButton) && (
|
||||
<div className="card-footer d-flex align-items-center jet-table-footer">
|
||||
<div className="table-footer row">
|
||||
<div className="col">
|
||||
{(clientSidePagination || serverSidePagination) && (
|
||||
<Pagination
|
||||
lastActivePageIndex={pageIndex}
|
||||
serverSide={serverSidePagination}
|
||||
autoGotoPage={gotoPage}
|
||||
autoCanNextPage={canNextPage}
|
||||
autoPageCount={pageCount}
|
||||
autoPageOptions={pageOptions}
|
||||
onPageIndexChanged={onPageIndexChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
|
||||
<div className="col">
|
||||
<button
|
||||
className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
|
||||
onClick={() =>
|
||||
onEvent('onBulkUpdate', { component }).then(() => {
|
||||
handleChangesSaved();
|
||||
})
|
||||
}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
|
||||
Discard changes
|
||||
</button>
|
||||
</div>
|
||||
<div className="card-footer d-flex align-items-center jet-table-footer">
|
||||
<div className="table-footer row">
|
||||
<div className="col">
|
||||
{(clientSidePagination || serverSidePagination) && (
|
||||
<Pagination
|
||||
lastActivePageIndex={pageIndex}
|
||||
serverSide={serverSidePagination}
|
||||
autoGotoPage={gotoPage}
|
||||
autoCanNextPage={canNextPage}
|
||||
autoPageCount={pageCount}
|
||||
autoPageOptions={pageOptions}
|
||||
onPageIndexChanged={onPageIndexChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-auto">
|
||||
{showFilterButton && (
|
||||
<span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
|
||||
<img src="/assets/images/icons/filter.svg" width="13" height="13" />
|
||||
{filters.length > 0 && (
|
||||
<a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{showDownloadButton && (
|
||||
<span
|
||||
data-tip="Download as CSV"
|
||||
className="btn btn-light btn-sm p-1"
|
||||
onClick={() => exportData('csv', true)}
|
||||
>
|
||||
<img src="/assets/images/icons/download.svg" width="13" height="13" />
|
||||
</span>
|
||||
)}
|
||||
{showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
|
||||
<div className="col">
|
||||
<button
|
||||
className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
|
||||
onClick={() =>
|
||||
onEvent('onBulkUpdate', { component }).then(() => {
|
||||
handleChangesSaved();
|
||||
})
|
||||
}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
|
||||
Discard changes
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-auto">
|
||||
{showFilterButton && (
|
||||
<span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
|
||||
<img src="/assets/images/icons/filter.svg" width="13" height="13" />
|
||||
{filters.length > 0 && (
|
||||
<a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{showDownloadButton && (
|
||||
<span
|
||||
data-tip="Download as CSV"
|
||||
className="btn btn-light btn-sm p-1"
|
||||
onClick={() => exportData('csv', true)}
|
||||
>
|
||||
<img src="/assets/images/icons/download.svg" width="13" height="13" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{isFiltersVisible && (
|
||||
<div className="table-filters card">
|
||||
<div className="card-header row">
|
||||
|
|
|
|||
Loading…
Reference in a new issue