Added a column in Table to show serial number(e.g from 1 to ...100), when other columns sorted, keep the serial number column unchanged(still from 1 to ...100)

[CeleKing]

What problem does this feature solve?

add a cloumn in Table to show unchangeable serial number
Added a column to show serial number(e.g from 1 to ...100), when other columns sorted, keep the serial number column unchanged(still from 1 to ...100)

What does the proposed API look like?

Column API sort={false|true}

[yesmeck]

It's easy to implemented on the user side. I don't think it should be a build in feature.

const columns = [{
  title: 'Id',
  key: 'index',
  render = (text, record, index) => index,
}]

[CeleKing]

Sorry, I can't solve this. Could you give me some advices to help me ? thank you ! @yesmeck

[yesmeck]

See my comment above.

[CeleKing]

Thank you very much! I understood the API better! And I think your comment above should be colon after render function instead of equal sign！@yesmeck

[muhaimincs]

but when i move to the second page the number is not continous

[neekey]

render = (text, record, index) => index,

it does not work with pagination, the index will alway starts from 0 even if you are at page 2

[neekey]

@yesmeck this issue should be reopend since your solution does not solve it properly

[muhaimincs]

how about if you manually provide the numbering from data retrieval

[touatoua]

how about this

render: (text, record) =>{array.indexOf(record) + 1}

[neekey]

@touatoua @muhaimincs it does not work if you use the sorting of the table, as the order of the data internally used by Table is not the same as the data you hold in your code.

[MoFoLuWaSo]

Final Solution:
this is old but let me share with you the solution, the secret is to use CLOSURE
you need two things;
from variable and the current page. the current page can be gotten from the pagination state
you will get the "from" variable from the server, if you are paginating using laravel eloquent, the from value is always included.

This is how you will use it;
Declare the following function with closure just before your columns =[ ...] variable

const incrementNumber = () => {
       let i = from - 1;
       return (index) => {
          if (pagination.current === 1) {
              return index++;
           }
           return i = i + 1;
       };
   };

   const fromCurrentIndex = incrementNumber();

Then inside your columns variable, you call the closure like this

const columns = [
        {
            title: 'S/N',
           render: (text, record, index) => {
                return fromCurrentIndex(index);
            }
        }
....
]

Please note here that the reason for the conditional statement checking if the current page is 1 (pagination.current () ) is because the fromCurrentIndexNumber can be called more than once when the page loads initially, and we don't want our first row to start from 9 or 10 depending on the number of times it was initially called. the pagination test prevents it from incrementing unnecessarily.

[BoringDays]

https://codesandbox.io/s/reverent-darwin-4x3ml

[vc7deo]

  const columns = [
    {
      title: '#',
      key: 'index',
      render: (text, record,index) => index + 1,
    },

[AmmarSiddiqi]

tasks.indexOf(task) + 1;
//tasks -> array
//task -> one element of iterating array

[Jahon93]

{
	title: "Number",
	dataIndex: "",
	key: "",
	render: (text, record, index) => index + 1,
},

[Mrityunjay2903]

{
title: 'Sr.No',
dataIndex: 'id',
render: (value, item, index) => page === 1 ? (index + 1) : ((page - 1) * size) + (index + 1)
}

where :
size = pageSizeOptions: ['30', '50', '100', '250','500'] and so on
page = current Page like 1,2,3,4,5 .... and so on

[tungvu2210]

{ title: 'Sr.No', dataIndex: 'id', render: (value, item, index) => page === 1 ? (index + 1) : ((page - 1) * size) + (index + 1) }

where : size = pageSizeOptions: ['30', '50', '100', '250','500'] and so on page = current Page like 1,2,3,4,5 .... and so on

Great !!!! Thank you so much. It helped me <3

[nguyenhuutinh]

how about this

render: (text, record) =>{array.indexOf(record) + 1}

this works

[mittaus]

{ title: 'Sr.No', dataIndex: 'id', render: (value, item, index) => page === 1 ? (index + 1) : ((page - 1) * size) + (index + 1) }

where : size = pageSizeOptions: ['30', '50', '100', '250','500'] and so on page = current Page like 1,2,3,4,5 .... and so on

I used method customRender on Ant Design Vue 3.2.10

{
  title: "#",
  dataIndex: "id",
  key: "id",
  customRender: ({ index }) => {
    return current.value === 1 ? index + 1 : (current.value - 1) * pageSize.value + (index + 1);
  },
},