Serial Number

[ChakraKBBala]

Can you please tell me how to add serial number for each row

[imballinst]

Hello! Is it any different with the examples in https://github.com/Imballinst/react-bs-datatable#example-usage? Basically this should do:

const header = [
  { title: 'Serial Number', prop: 'serialNumber' },
];

const body = [
  {
    serialNumber: 'BBBB-XXXX-WWWW'  },
  {
    serialNumber: 'BBBB-XXXX-YYYY'
  }
];

<Datatable
  tableHeader={header}
  tableBody={body}
/>

If your use case is different -- e.g. there is more than that, please do let me know.

[ChakraKBBala]

Thanks for your response @Imballinst , But i need to add a auto-increment number for each row

eg:

[imballinst]

Let's see if I get your requirement right:

(1) name, age, and gender data field exists, such as:

[
  { name: 'XXX', age: 1, gender: 'YYY' },
  { name: 'YYY', age: 12, gender: 'XXX' },
  { name: 'ZZZ', age: 4, gender: 'YZCX' },
]

and (2) you do not want to manually add, say, sNo field to each of the array element?

If that is what you mean, it is not available at the moment -- but I can make a quick PR and sample how to use it in CodeSandbox if you want.

[ChakraKBBala]

@Imballinst Correct.., i don't have s.no filed in my array element i want to create it manually from front-end

[imballinst]

Gotcha. I'll let you know tonight/tomorrow morning!

[imballinst]

Hey @ChakraKBBala, just to make sure, does this not fulfill your need?

const arrayWithoutSerialNumber = [
  { name: 'XXX', age: 1, gender: 'YYY' },
  { name: 'YYY', age: 12, gender: 'XXX' },
  { name: 'ZZZ', age: 4, gender: 'YZCX' },
];
const yourArray = arrayWithoutSerialNumber.map((arr, idx) => ({ ...arr, sNo: idx + 1 });

// Now your array looks like below.
console.log(yourArray);
[
  {
    "name": "XXX",
    "age": 1,
    "gender": "YYY",
    "sNo": 1
  },
  {
    "name": "YYY",
    "age": 12,
    "gender": "XXX",
    "sNo": 2
  },
  {
    "name": "ZZZ",
    "age": 4,
    "gender": "YZCX",
    "sNo": 3
  }
]

Just in case, so I do not implement something too-complex.

[ChakraKBBala]

I thought not to add s.no field into that array elements, anyways if it is too complex to implement then i can use this map method. Thanks :) @Imballinst

[imballinst]

I see. Yeah, from my point of view, the complexity rises when you combine it with sort and pagination -- e.g.

1. When sorting the serial number field, we need to have an internal process of "reversing" the virtual serial number, such as: for (let i = data.length - 1; i >= 0; i -= 1) instead of for (let i = 0; i < data.length; i += 1)
2. When paginating, e.g. we are in page 1, 2, 3, etc. the table needs to count the starting serial number, such as startID: (page * rowsPerPage) + 1 and ends with endID: (page * rowsPerPage) + rowsPerPage
3. When sorting + paginating, 💥. I think it is close to impossible without a "persisted ID value" (in this case, the serial number).

Thank you for your understanding, though! Feel free to re-open this issue if you have further queries.