Skip to content

feat: Add row number column to data browser #2878

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.

Sign up for GitHub

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

Merged
mtrezza merged 8 commits into from
Jul 9, 2025
Merged

feat: Add row number column to data browser #2878

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9d6d7af
feat(data-browser): add optional row number column
mtrezza Jul 9, 2025
e41a30d
Style row number column
mtrezza Jul 9, 2025
9b3a7b6
fix: keep checkbox and row numbers sticky
mtrezza Jul 9, 2025
7bc0052
Persist row number column setting
mtrezza Jul 9, 2025
1ede83e
Merge branch 'alpha' into codex/add-row-number-column-to-data-browser
mtrezza Jul 9, 2025
d23c8d4
lint
mtrezza Jul 9, 2025
7b27cd3
Merge branch 'alpha' into codex/add-row-number-column-to-data-browser
mtrezza Jul 9, 2025
82d123e
Merge branch 'alpha' into codex/add-row-number-column-to-data-browser
mtrezza Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 28 additions & 6 deletions src/components/BrowserRow/BrowserRow.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
row,
rowValue,
rowWidth,
showRowNumber,
rowNumberWidth,
skip,
selection,
selectRow,
setCopyableValue,
Expand Down Expand Up @@ -82,12 +85,12 @@
style={
freezeIndex >= 0
? {
position: 'sticky',
left: 0,
zIndex: 1,
background: rowBackground,
borderBottom: '1px solid #e3e3ea',
}
position: 'sticky',

Check failure on line 88 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 16 spaces but found 18
left: 0,

Check failure on line 89 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 16 spaces but found 18
zIndex: 1,

Check failure on line 90 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 16 spaces but found 18
background: rowBackground,

Check failure on line 91 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 16 spaces but found 18
borderBottom: '1px solid #e3e3ea',

Check failure on line 92 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 16 spaces but found 18
}

Check failure on line 93 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 14 spaces but found 16
: {}
}
>
Expand All @@ -98,6 +101,25 @@
onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
/>
</span>
{showRowNumber && (
<span
className={styles.rowNumberCell}
style={
freezeIndex >= 0
? {
position: 'sticky',

Check failure on line 110 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 18 spaces but found 20
left: 30,

Check failure on line 111 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 18 spaces but found 20
zIndex: 1,

Check failure on line 112 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 18 spaces but found 20
background: rowBackground,

Check failure on line 113 in src/components/BrowserRow/BrowserRow.react.js

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 18 spaces but found 20
borderBottom: '1px solid #e3e3ea',
width: rowNumberWidth,
}
: { width: rowNumberWidth }
}
>
{row >= 0 ? (skip + row + 1).toLocaleString() : ''}
</span>
)}
Copy link

@coderabbitai coderabbitai bot Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Row number cell implementation looks good, but fix indentation issues.

The row number cell logic is correctly implemented:

  • Proper conditional rendering based on showRowNumber
  • Correct calculation: (skip + row + 1) for pagination
  • Appropriate styling with sticky positioning matching checkbox cell
  • Good use of toLocaleString() for number formatting

However, there are indentation issues that need to be addressed.

Apply this diff to fix the indentation:

         {showRowNumber && (
           <span
             className={styles.rowNumberCell}
             style={
               freezeIndex >= 0
                 ? {
-                    position: 'sticky',
-                    left: 30,
-                    zIndex: 1,
-                    background: rowBackground,
-                    borderBottom: '1px solid #e3e3ea',
-                    width: rowNumberWidth,
-                  }
+                  position: 'sticky',
+                  left: 30,
+                  zIndex: 1,
+                  background: rowBackground,
+                  borderBottom: '1px solid #e3e3ea',
+                  width: rowNumberWidth,
+                }
                 : { width: rowNumberWidth }
             }
           >
             {row >= 0 ? (skip + row + 1).toLocaleString() : ''}
           </span>
         )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{showRowNumber && (
<span
className={styles.rowNumberCell}
style={
freezeIndex >= 0
? {
position: 'sticky',
left: 30,
zIndex: 1,
background: rowBackground,
borderBottom: '1px solid #e3e3ea',
width: rowNumberWidth,
}
: { width: rowNumberWidth }
}
>
{row >= 0 ? (skip + row + 1).toLocaleString() : ''}
</span>
)}
{showRowNumber && (
<span
className={styles.rowNumberCell}
style={
freezeIndex >= 0
? {
position: 'sticky',
left: 30,
zIndex: 1,
background: rowBackground,
borderBottom: '1px solid #e3e3ea',
width: rowNumberWidth,
}
: { width: rowNumberWidth }
}
>
{row >= 0 ? (skip + row + 1).toLocaleString() : ''}
</span>
)}
🧰 Tools
🪛 GitHub Check: Lint

[failure] 113-113:
Expected indentation of 18 spaces but found 20

[failure] 112-112:
Expected indentation of 18 spaces but found 20

[failure] 111-111:
Expected indentation of 18 spaces but found 20

[failure] 110-110:
Expected indentation of 18 spaces but found 20

🤖 Prompt for AI Agents 
In src/components/BrowserRow/BrowserRow.react.js between lines 104 and 122, the
row number cell JSX block has inconsistent indentation. Fix the indentation by
aligning the opening and closing tags and nested properties properly, ensuring
each nested level is indented uniformly for better readability and
maintainability.

{order.map(({ name, width, visible }, j) => {
if (!visible) {
return null;
Expand Down
38 changes: 34 additions & 4 deletions src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,23 @@ import { DndProvider } from 'react-dnd';
export default class DataBrowserHeaderBar extends React.Component {
handleContextMenu = (index, event) => {
event.preventDefault();
const { freezeIndex, freezeColumns, unfreezeColumns, setContextMenu } = this.props;
const items =
const {
freezeIndex,
freezeColumns,
unfreezeColumns,
setContextMenu,
showRowNumber,
setShowRowNumber,
} = this.props;
const items = [
{
text: showRowNumber ? 'Hide row number' : 'Display row number',
callback: () => setShowRowNumber(!showRowNumber),
},
freezeIndex >= 0 && index <= freezeIndex
? [{ text: 'Unfreeze column', callback: () => unfreezeColumns() }]
: [{ text: 'Freeze column', callback: () => freezeColumns(index) }];
? { text: 'Unfreeze column', callback: () => unfreezeColumns() }
: { text: 'Freeze column', callback: () => freezeColumns(index) },
];
setContextMenu(event.pageX, event.pageY, items);
};

Expand All @@ -39,6 +51,8 @@ export default class DataBrowserHeaderBar extends React.Component {
stickyLefts,
handleLefts,
freezeIndex,
showRowNumber,
rowNumberWidth,
} = this.props;
const elements = [
<div
Expand All @@ -52,6 +66,22 @@ export default class DataBrowserHeaderBar extends React.Component {
</div>,
];

if (showRowNumber) {
elements.push(
<div
key="rowNumber"
className={[styles.wrap, styles.rowNumber].join(' ')}
style={
freezeIndex >= 0
? { position: 'sticky', left: 30, zIndex: 11, width: rowNumberWidth }
: { width: rowNumberWidth }
}
>
#
</div>
);
}

headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
if (!visible) {
return;
Expand Down
22 changes: 16 additions & 6 deletions src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
display: inline-block;
min-width: 100%;
// to resolve rendering issue with retina displays
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0, 0, 0);
}

.wrap {
Expand Down Expand Up @@ -53,7 +53,18 @@
vertical-align: top;
text-align: center;
width: 30px;
background: rgb(114, 111, 133)
background: rgb(114, 111, 133);
}

.rowNumber {
line-height: 30px;
height: 30px;
vertical-align: top;
text-align: right;
background: rgb(114, 111, 133);
border-right: 1px solid #e3e3ea;
padding: 0 4px;
box-sizing: border-box;
}

.handle {
Expand Down Expand Up @@ -90,20 +101,19 @@
border-top: 1px solid #e3e3ea;
border-bottom: 1px solid #e3e3ea;
height: 30px;
width:100%;
width: 100%;
vertical-align: middle;
padding-left: 2px;
margin-top: 30px;
line-height: 31px;
animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
0% {
background-color:#ffffff;
background-color: #ffffff;
}
100% {
background-color: #e3e3ea;

}
}
45 changes: 27 additions & 18 deletions src/dashboard/Data/Browser/Browser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,7 +661,7 @@ class Browser extends DashboardView {
}
obj.save(null, { useMasterKey }).then(
objectSaved => {
const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
const msg = objectSaved.className + " with id '" + objectSaved.id + "' created";
this.showNote(msg, false);

const state = { data: this.state.data };
Expand Down Expand Up @@ -764,7 +764,7 @@ class Browser extends DashboardView {

obj.save(null, { useMasterKey: true }).then(
objectSaved => {
const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + 'created';
const msg = objectSaved.className + " with id '" + objectSaved.id + "' " + 'created';
this.showNote(msg, false);

const state = {
Expand Down Expand Up @@ -908,7 +908,7 @@ class Browser extends DashboardView {
const { useMasterKey, skip, limit } = this.state;
this.setState({
data: null,
})
});
const query = await queryFromFilters(source, filters);
const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
Expand Down Expand Up @@ -1270,7 +1270,7 @@ class Browser extends DashboardView {
const { useMasterKey } = this.state;
obj.save(null, { useMasterKey }).then(
objectSaved => {
const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
const msg = objectSaved.className + " with id '" + objectSaved.id + "' updated";
this.showNote(msg, false);

const state = {
Expand Down Expand Up @@ -1398,7 +1398,7 @@ class Browser extends DashboardView {
let deletedNote;

if (toDeleteObjectIds.length == 1) {
deletedNote = className + ' with id \'' + toDeleteObjectIds[0] + '\' deleted';
deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
} else {
deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
}
Expand Down Expand Up @@ -1426,7 +1426,7 @@ class Browser extends DashboardView {
if (error.code === Parse.Error.AGGREGATE_ERROR) {
if (error.errors.length == 1) {
errorDeletingNote =
'Error deleting ' + className + ' with id \'' + error.errors[0].object.id + '\'';
'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
} else if (error.errors.length < toDeleteObjectIds.length) {
errorDeletingNote =
'Error deleting ' +
Expand All @@ -1443,7 +1443,7 @@ class Browser extends DashboardView {
} else {
if (toDeleteObjectIds.length == 1) {
errorDeletingNote =
'Error deleting ' + className + ' with id \'' + toDeleteObjectIds[0] + '\'';
'Error deleting ' + className + " with id '" + toDeleteObjectIds[0] + "'";
} else {
errorDeletingNote =
'Error deleting ' + toDeleteObjectIds.length + ' ' + className + ' objects';
Expand Down Expand Up @@ -1598,13 +1598,15 @@ class Browser extends DashboardView {
script.cloudCodeFunction,
{ object: object.toPointer() },
{ useMasterKey: true }
).then(response => ({
objectId: object.id,
response,
})).catch(error => ({
objectId: object.id,
error,
}))
)
.then(response => ({
objectId: object.id,
response,
}))
.catch(error => ({
objectId: object.id,
error,
}))
);

const results = await Promise.all(promises);
Expand All @@ -1631,12 +1633,18 @@ class Browser extends DashboardView {
totalErrorCount += batchErrorCount;

if (objects.length > 1) {
this.showNote(`Ran script "${script.title}" on ${batch.length} objects in batch ${batchCount}/${totalBatchCount} with ${batchErrorCount} errors.`, batchErrorCount > 0);
this.showNote(
`Ran script "${script.title}" on ${batch.length} objects in batch ${batchCount}/${totalBatchCount} with ${batchErrorCount} errors.`,
batchErrorCount > 0
);
}
}

if (objects.length > 1) {
this.showNote(`Ran script "${script.title}" on ${objects.length} objects in ${batchCount} batches with ${totalErrorCount} errors.`, totalErrorCount > 0);
this.showNote(
`Ran script "${script.title}" on ${objects.length} objects in ${batchCount} batches with ${totalErrorCount} errors.`,
totalErrorCount > 0
);
}
this.refresh();
} catch (e) {
Expand Down Expand Up @@ -1957,7 +1965,7 @@ class Browser extends DashboardView {
}}
removeFilter={filter => {
this.resetPage();
this.removeFilter(filter)
this.removeFilter(filter);
}}
classClicked={() => {
this.resetPage();
Expand All @@ -1978,7 +1986,7 @@ class Browser extends DashboardView {
// Scroll to top
window.scrollTo({
top: 0,
behavior: 'smooth'
behavior: 'smooth',
});

// Reset pagination to page 1
Expand Down Expand Up @@ -2201,6 +2209,7 @@ class Browser extends DashboardView {
errorAggregatedData={this.state.errorAggregatedData}
appName={this.props.params.appId}
limit={this.state.limit}
skip={this.state.skip}
/>
<BrowserFooter
skip={this.state.skip}
Expand Down
Loading
Loading